以下は、ヒートマップチャートの例です。
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'
}
}]
};
}結果を確認します。
