Angular-highcharts-heat-map

Angular Highcharts-ヒートマップチャート

以下は、ヒートマップチャートの例です。

link：/angular_highcharts/angular_highcharts_configuration_syntax [Highcharts構成構文]の章で、チャートを描画するために使用される構成をすでに確認しました。

ヒートマップチャートの例を以下に示します。

構成

ここで、追加の構成/実行された手順を見てみましょう。

チャート

チャートタイプを「ヒートマップ」ベースに設定します。 chart.type は、チャートのシリーズタイプを決定します。 ここで、デフォルト値は「line」です。

chart : {
   type: 'heatmap',
   marginTop: 40,
   marginBottom: 80
},

例

*_app.component.ts_*

import { Component } from '@angular/core';
import *as Highcharts from 'highcharts';
import* as highchartsHeatmap from 'highcharts/modules/heatmap';
highchartsHeatmap(Highcharts);
@Component({
  selector: 'app-root',
  templateUrl: './app.componentl',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
   highcharts = Highcharts;
   chartOptions = {
      chart : {
         type: 'heatmap',
         marginTop: 40,
         marginBottom: 80
      },
      title : {
         text: 'Sales per employee per weekday'
      },
      xAxis : {
         categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas',
            'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
      },
      yAxis : {
         categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
            title: null
      },
      colorAxis : {
         min: 0,
         minColor: '#FFFFFF',
         maxColor: Highcharts.getOptions().colors[0]
      },
      legend : {
         align: 'right',
         layout: 'vertical',
         margin: 0,
         verticalAlign: 'top',
         y: 25,
         symbolHeight: 280
      },
      tooltip : {
         formatter: function () {
            return '<b>' + this.series.xAxis.categories[this.point.x] +
               '</b> sold <br><b>' +
               this.point.value +
               '</b> items on <br><b>' +
               this.series.yAxis.categories[this.point.y] + '</b>';
         }
      },
      series : [{
         name: 'Sales per employee',
         borderWidth: 1,
         data: [[dataLabels: {
            enabled: true,
            color: '#000000'
         }
      }]

   };
}

結果

結果を確認します。

ヒートマップチャート