複数の数値範囲を定義し、各範囲に対して最大値／最小値／色を設定してデータをプロットすることで、カテゴリベースのヒートマップを描画できます。

数値範囲は、例えば0～10、10～20、20～30のように指定しますが、この場合、0以下や30以上など下限や上限を超える値には色が設定されません。これを避けるには、数値範囲を指定する際に、有限値ではなくSingle.MinValue、Single.MaxValueを使用します。

以下に、５つの範囲を指定したカテゴリベースのヒートマップの設定コードを記載します。



◎サンプルコード（VB）

Imports C1.Chart
Imports C1.Win.Chart.Extended

Namespace C1HeatMapColorScaleCheck
    Public Partial Class Form1
        Inherits Form

        Public Sub New()
            InitializeComponent()
        End Sub

        Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
            flexChart1.BeginUpdate()

            ' 上限（85）や下限（15）を超えた値にも色を設定する方法
            Dim scale = New DiscreteColorScale() With {
                .Intervals = New List(Of DiscreteColorScale.Interval)()
            }
            scale.Intervals.Add(New DiscreteColorScale.Interval(Single.MinValue, 15, Color.FromArgb(&H05, &H71, &HB0), "Very Low"))
            scale.Intervals.Add(New DiscreteColorScale.Interval(15, 35, Color.FromArgb(&H92, &HC5, &HDE), "Low"))
            scale.Intervals.Add(New DiscreteColorScale.Interval(35, 65, Color.FromArgb(&HD7, &HD7, &HD7), "Normal"))
            scale.Intervals.Add(New DiscreteColorScale.Interval(65, 85, Color.FromArgb(&HF4, &HA5, &H82), "High"))
            scale.Intervals.Add(New DiscreteColorScale.Interval(85, Single.MaxValue, Color.FromArgb(&HCA, &H00, &H20), "Critical"))
            Dim rnd = New Random()
            Dim data = New Double(23, 6) {}

            'テストデータの作成（値：0～100）
            For j = 0 To 6

                For i = 0 To 23
                    data(i, j) = 10 * Math.Exp(-(i - 12) * (i - 12) / (2 * 4.0 * 4.0)) / Math.Sqrt(2 * Math.PI * 4.0 * 4.0) * If(j = 5 OrElse j = 6, 50, 100) * rnd.NextDouble()
                Next
            Next

            ' ヒートマップの設定
            Dim hmap = New Heatmap()
            'hmap.ItemsSource = data;
            hmap.DataSource = data
            hmap.ColorScale = scale
            flexChart1.Series.Clear()
            flexChart1.Series.Add(hmap)
            Dim times = New String(23) {}

            For i = 0 To 23
                times(i) = New DateTime(2000, 1, 1, i, 0, 0).ToShortTimeString()
            Next

            flexChart1.AxisX.DataSource = times
            flexChart1.AxisY.DataSource = New String() {"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"}
            flexChart1.EndUpdate()

            ' X軸のグリッド線を設定
            flexChart1.AxisX.MinorGrid = True
            flexChart1.AxisX.MinorGridStyle.StrokeColor = Color.White
            flexChart1.AxisX.LabelAngle = 45
            ' Y軸のグリッド線を設定
            flexChart1.AxisY.MajorGrid = False
            flexChart1.AxisY.MinorGrid = True
            flexChart1.AxisY.MinorGridStyle.StrokeColor = Color.White
            ' 凡例を設定
            flexChart1.Legend.Position = Position.Bottom
        End Sub
    End Class
End Namespace

◎サンプルコード（C#）

using C1.Chart;
using C1.Win.Chart.Extended;

namespace C1HeatMapColorScaleCheck
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            flexChart1.BeginUpdate();

            // 上限（85）や下限（15）を超えた値にも色を設定する方法
            var scale = new DiscreteColorScale() { Intervals = new List() };
            scale.Intervals.Add(new DiscreteColorScale.Interval(Single.MinValue, 15, Color.FromArgb(0x05, 0x71, 0xB0), "Very Low"));
            scale.Intervals.Add(new DiscreteColorScale.Interval(15, 35, Color.FromArgb(0x92, 0xC5, 0xDE), "Low"));
            scale.Intervals.Add(new DiscreteColorScale.Interval(35, 65, Color.FromArgb(0xD7, 0xD7, 0xD7), "Normal"));
            scale.Intervals.Add(new DiscreteColorScale.Interval(65, 85, Color.FromArgb(0xF4, 0xA5, 0x82), "High"));
            scale.Intervals.Add(new DiscreteColorScale.Interval(85, Single.MaxValue, Color.FromArgb(0xCA, 0x00, 0x20), "Critical"));

            //テストデータの作成（値：0～100）
            var rnd = new Random();
            var data = new double[24, 7];

            for (var j = 0; j < 7; j++)
            {
                for (var i = 0; i < 24; i++)
                {
                    data[i, j] = 10 * Math.Exp(-(i - 12) * (i - 12) / (2 * 4.0 * 4.0)) / Math.Sqrt(2 * Math.PI * 4.0 * 4.0) * ((j == 5 || j == 6) ? 50 : 100) * rnd.NextDouble();
                }
            }

            // ヒートマップの設定
            var hmap = new Heatmap();
            //hmap.ItemsSource = data;
            hmap.DataSource = data;
            hmap.ColorScale = scale;
            flexChart1.Series.Clear();
            flexChart1.Series.Add(hmap);

            var times = new string[24];
            for (var i = 0; i < 24; i++)
                times[i] = new DateTime(2000, 1, 1, i, 0, 0).ToShortTimeString();
            flexChart1.AxisX.DataSource = times;
            flexChart1.AxisY.DataSource = new string[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" };
            flexChart1.EndUpdate();

            // X軸のグリッド線を設定
            this.flexChart1.AxisX.MinorGrid = true;
            this.flexChart1.AxisX.MinorGridStyle.StrokeColor = Color.White;
            this.flexChart1.AxisX.LabelAngle = 45;
            // Y軸のグリッド線を設定
            this.flexChart1.AxisY.MajorGrid = false;
            this.flexChart1.AxisY.MinorGrid = true;
            this.flexChart1.AxisY.MinorGridStyle.StrokeColor = Color.White;
            // 凡例を設定
            this.flexChart1.Legend.Position = Position.Bottom;
        }
    }
}