我正在尝试深入了解我的热图。钻取无法正常工作。 x 轴保持不变。
我的代码：
// Substring template helper for the responsive labels
Highcharts.Templating.helpers.substr = (s, from, length) =>
s.substr(from, length);
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'Sales per employee per weekday',
style: {
fontSize: '1em'
}
},
xAxis: {
categories: ["Africa","East Asia","English","Eurasia","Latin America","News Network","South & Central Asia"]
},
yAxis: {
categories: ["Jun 23, 2024","Jun 30, 2024","Jul 7, 2024","Jul 14, 2024","Jul 21, 2024"],
title: null,
reversed: true
},
accessibility: {
point: {
descriptionFormat: '{(add index 1)}. ' +
'{series.xAxis.categories.(x)} sales ' +
'{series.yAxis.categories.(y)}, {value}.'
}
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
format: '<b>{series.xAxis.categories.(point.x)}</b> sold<br>' +
'<b>{point.value}</b> items on <br>' +
'<b>{series.yAxis.categories.(point.y)}</b>'
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [{"x":0,"y":0,"value":986122,"name":"Africa","id":"Africa","drilldown":"Africa"},{"x":0,"y":1,"value":1346570,"name":"Africa","id":"Africa","drilldown":"Africa"},{"x":0,"y":2,"value":3572925,"name":"Africa","id":"Africa","drilldown":"Africa"},{"x":0,"y":3,"value":1367264,"name":"Africa","id":"Africa","drilldown":"Africa"},{"x":0,"y":4,"value":703258,"name":"Africa","id":"Africa","drilldown":"Africa"},{"x":1,"y":0,"value":5265997,"name":"East Asia","id":"East Asia","drilldown":"East Asia"},{"x":1,"y":1,"value":6305690,"name":"East Asia","id":"East Asia","drilldown":"East Asia"},{"x":1,"y":2,"value":6420835,"name":"East Asia","id":"East Asia","drilldown":"East Asia"},{"x":1,"y":3,"value":4388311,"name":"East Asia","id":"East Asia","drilldown":"East Asia"},{"x":1,"y":4,"value":1226716,"name":"East Asia","id":"East Asia","drilldown":"East Asia"},{"x":2,"y":0,"value":195536,"name":"English","id":"English","drilldown":"English"},{"x":2,"y":1,"value":226954,"name":"English","id":"English","drilldown":"English"},{"x":2,"y":2,"value":615129,"name":"English","id":"English","drilldown":"English"},{"x":2,"y":3,"value":610941,"name":"English","id":"English","drilldown":"English"},{"x":2,"y":4,"value":281324,"name":"English","id":"English","drilldown":"English"},{"x":3,"y":0,"value":1598662,"name":"Eurasia","id":"Eurasia","drilldown":"Eurasia"},{"x":3,"y":1,"value":2229279,"name":"Eurasia","id":"Eurasia","drilldown":"Eurasia"},{"x":3,"y":2,"value":2101349,"name":"Eurasia","id":"Eurasia","drilldown":"Eurasia"},{"x":3,"y":3,"value":1780694,"name":"Eurasia","id":"Eurasia","drilldown":"Eurasia"},{"x":3,"y":4,"value":556516,"name":"Eurasia","id":"Eurasia","drilldown":"Eurasia"},{"x":4,"y":0,"value":723093,"name":"Latin America","id":"Latin America","drilldown":"Latin America"},{"x":4,"y":1,"value":907773,"name":"Latin America","id":"Latin America","drilldown":"Latin America"},{"x":4,"y":2,"value":474232,"name":"Latin America","id":"Latin America","drilldown":"Latin America"},{"x":4,"y":3,"value":1045556,"name":"Latin America","id":"Latin America","drilldown":"Latin America"},{"x":4,"y":4,"value":297576,"name":"Latin America","id":"Latin America","drilldown":"Latin America"},{"x":5,"y":0,"value":192253,"name":"News Network","id":"News Network","drilldown":"News Network"},{"x":5,"y":1,"value":238947,"name":"News Network","id":"News Network","drilldown":"News Network"},{"x":5,"y":2,"value":324038,"name":"News Network","id":"News Network","drilldown":"News Network"},{"x":5,"y":3,"value":318308,"name":"News Network","id":"News Network","drilldown":"News Network"},{"x":5,"y":4,"value":95326,"name":"News Network","id":"News Network","drilldown":"News Network"},{"x":6,"y":0,"value":12852933,"name":"South & Central Asia","id":"South & Central Asia","drilldown":"South & Central Asia"},{"x":6,"y":1,"value":13149582,"name":"South & Central Asia","id":"South & Central Asia","drilldown":"South & Central Asia"},{"x":6,"y":2,"value":22665161,"name":"South & Central Asia","id":"South & Central Asia","drilldown":"South & Central Asia"},{"x":6,"y":3,"value":13832014,"name":"South & Central Asia","id":"South & Central Asia","drilldown":"South & Central Asia"},{"x":6,"y":4,"value":3531948,"name":"South & Central Asia","id":"South & Central Asia","drilldown":"South & Central Asia"}],
dataLabels: {
enabled: true,
color: '#000000'
}
}],
drilldown: {
series: [{"id":"Africa","data":[{"x":0,"y":0,"value":3332,"name":"Central Africa"},{"x":0,"y":1,"value":6294,"name":"Central Africa"},{"x":0,"y":2,"value":19695,"name":"Central Africa"},{"x":0,"y":3,"value":20790,"name":"Central Africa"},{"x":0,"y":4,"value":12037,"name":"Central Africa"},{"x":1,"y":0,"value":23473,"name":"Bambara"},{"x":1,"y":1,"value":41649,"name":"Bambara"},{"x":1,"y":2,"value":58678,"name":"Bambara"},{"x":1,"y":3,"value":82628,"name":"Bambara"},{"x":1,"y":4,"value":16658,"name":"Bambara"},{"x":2,"y":0,"value":112507,"name":"English to Africa"},{"x":2,"y":1,"value":96303,"name":"English to Africa"},{"x":2,"y":2,"value":92259,"name":"English to Africa"},{"x":2,"y":3,"value":113810,"name":"English to Africa"},{"x":2,"y":4,"value":81830,"name":"English to Africa"},{"x":3,"y":0,"value":124456,"name":"French to Africa"},{"x":3,"y":1,"value":166013,"name":"French to Africa"},{"x":3,"y":2,"value":203681,"name":"French to Africa"},{"x":3,"y":3,"value":167273,"name":"French to Africa"},{"x":3,"y":4,"value":74951,"name":"French to Africa"},{"x":4,"y":0,"value":19111,"name":"Hausa"},{"x":4,"y":1,"value":38362,"name":"Hausa"},{"x":4,"y":2,"value":118157,"name":"Hausa"},{"x":4,"y":3,"value":29898,"name":"Hausa"},{"x":4,"y":4,"value":27170,"name":"Hausa"},{"x":5,"y":0,"value":227378,"name":"Horn of Africa"},{"x":5,"y":1,"value":449723,"name":"Horn of Africa"},{"x":5,"y":2,"value":498688,"name":"Horn of Africa"},{"x":5,"y":3,"value":343926,"name":"Horn of Africa"},{"x":5,"y":4,"value":179687,"name":"Horn of Africa"},{"x":6,"y":0,"value":15950,"name":"Portuguese"},{"x":6,"y":1,"value":15644,"name":"Portuguese"},{"x":6,"y":2,"value":115051,"name":"Portuguese"},{"x":6,"y":3,"value":146213,"name":"Portuguese"},{"x":6,"y":4,"value":10532,"name":"Portuguese"},{"x":7,"y":0,"value":160832,"name":"Somali"},{"x":7,"y":1,"value":230285,"name":"Somali"},{"x":7,"y":2,"value":335421,"name":"Somali"},{"x":7,"y":3,"value":293554,"name":"Somali"},{"x":7,"y":4,"value":181145,"name":"Somali"},{"x":8,"y":0,"value":35827,"name":"Swahili"},{"x":8,"y":1,"value":85717,"name":"Swahili"},{"x":8,"y":2,"value":40979,"name":"Swahili"},{"x":8,"y":3,"value":26109,"name":"Swahili"},{"x":8,"y":4,"value":11899,"name":"Swahili"},{"x":9,"y":0,"value":263256,"name":"Zimbabwe"},{"x":9,"y":1,"value":216580,"name":"Zimbabwe"},{"x":9,"y":2,"value":2090316,"name":"Zimbabwe"},{"x":9,"y":3,"value":143063,"name":"Zimbabwe"},{"x":9,"y":4,"value":107349,"name":"Zimbabwe"}]},{"id":"East Asia","data":[{"x":0,"y":0,"value":1637453,"name":"Burmese"},{"x":0,"y":1,"value":3193859,"name":"Burmese"},{"x":0,"y":2,"value":3134798,"name":"Burmese"},{"x":0,"y":3,"value":2169916,"name":"Burmese"},{"x":0,"y":4,"value":554289,"name":"Burmese"},{"x":1,"y":0,"value":3010,"name":"Cantonese"},{"x":1,"y":1,"value":4082,"name":"Cantonese"},{"x":1,"y":2,"value":4741,"name":"Cantonese"},{"x":1,"y":3,"value":5771,"name":"Cantonese"},{"x":1,"y":4,"value":2670,"name":"Cantonese"},{"x":2,"y":0,"value":2309054,"name":"Indonesian"},{"x":2,"y":1,"value":1160367,"name":"Indonesian"},{"x":2,"y":2,"value":415791,"name":"Indonesian"},{"x":2,"y":3,"value":182753,"name":"Indonesian"},{"x":2,"y":4,"value":26107,"name":"Indonesian"},{"x":3,"y":0,"value":248758,"name":"Khmer"},{"x":3,"y":1,"value":486007,"name":"Khmer"},{"x":3,"y":2,"value":435036,"name":"Khmer"},{"x":3,"y":3,"value":585874,"name":"Khmer"},{"x":3,"y":4,"value":112914,"name":"Khmer"},{"x":4,"y":0,"value":10248,"name":"Lao"},{"x":4,"y":1,"value":14033,"name":"Lao"},{"x":4,"y":2,"value":23689,"name":"Lao"},{"x":4,"y":3,"value":16521,"name":"Lao"},{"x":4,"y":4,"value":7454,"name":"Lao"},{"x":5,"y":0,"value":571,"name":"Korean"},{"x":5,"y":1,"value":789,"name":"Korean"},{"x":5,"y":2,"value":696,"name":"Korean"},{"x":5,"y":3,"value":916,"name":"Korean"},{"x":5,"y":4,"value":819,"name":"Korean"},{"x":6,"y":0,"value":119340,"name":"Mandarin"},{"x":6,"y":1,"value":43250,"name":"Mandarin"},{"x":6,"y":2,"value":125474,"name":"Mandarin"},{"x":6,"y":3,"value":101757,"name":"Mandarin"},{"x":6,"y":4,"value":31480,"name":"Mandarin"},{"x":7,"y":0,"value":7194,"name":"Thai"},{"x":7,"y":1,"value":6524,"name":"Thai"},{"x":7,"y":2,"value":16384,"name":"Thai"},{"x":7,"y":3,"value":179481,"name":"Thai"},{"x":7,"y":4,"value":75966,"name":"Thai"},{"x":8,"y":0,"value":156084,"name":"Tibetan"},{"x":8,"y":1,"value":216049,"name":"Tibetan"},{"x":8,"y":2,"value":57013,"name":"Tibetan"},{"x":8,"y":3,"value":68467,"name":"Tibetan"},{"x":8,"y":4,"value":31427,"name":"Tibetan"},{"x":9,"y":0,"value":774285,"name":"Vietnamese"},{"x":9,"y":1,"value":1180730,"name":"Vietnamese"},{"x":9,"y":2,"value":2207213,"name":"Vietnamese"},{"x":9,"y":3,"value":1076855,"name":"Vietnamese"},{"x":9,"y":4,"value":383590,"name":"Vietnamese"}]},{"id":"English","data":[{"x":0,"y":0,"value":175297,"name":"Central News"},{"x":0,"y":1,"value":216929,"name":"Central News"},{"x":0,"y":2,"value":602938,"name":"Central News"},{"x":0,"y":3,"value":601442,"name":"Central News"},{"x":0,"y":4,"value":275782,"name":"Central News"},{"x":1,"y":0,"value":0,"name":"Public Affairs"},{"x":1,"y":1,"value":0,"name":"Public Affairs"},{"x":1,"y":2,"value":0,"name":"Public Affairs"},{"x":1,"y":3,"value":0,"name":"Public Affairs"},{"x":1,"y":4,"value":0,"name":"Public Affairs"},{"x":2,"y":0,"value":20239,"name":"Learning English"},{"x":2,"y":1,"value":10025,"name":"Learning English"},{"x":2,"y":2,"value":12191,"name":"Learning English"},{"x":2,"y":3,"value":9499,"name":"Learning English"},{"x":2,"y":4,"value":5542,"name":"Learning English"}]},{"id":"Eurasia","data":[{"x":0,"y":0,"value":299951,"name":"Albanian"},{"x":0,"y":1,"value":487000,"name":"Albanian"},{"x":0,"y":2,"value":585711,"name":"Albanian"},{"x":0,"y":3,"value":443255,"name":"Albanian"},{"x":0,"y":4,"value":175131,"name":"Albanian"},{"x":1,"y":0,"value":63088,"name":"Bosnian"},{"x":1,"y":1,"value":161947,"name":"Bosnian"},{"x":1,"y":2,"value":4192,"name":"Bosnian"},{"x":1,"y":3,"value":7312,"name":"Bosnian"},{"x":1,"y":4,"value":9046,"name":"Bosnian"},{"x":2,"y":0,"value":166269,"name":"Georgian"},{"x":2,"y":1,"value":214615,"name":"Georgian"},{"x":2,"y":2,"value":261562,"name":"Georgian"},{"x":2,"y":3,"value":77146,"name":"Georgian"},{"x":2,"y":4,"value":6463,"name":"Georgian"},{"x":3,"y":0,"value":24095,"name":"Macedonian"},{"x":3,"y":1,"value":41660,"name":"Macedonian"},{"x":3,"y":2,"value":56299,"name":"Macedonian"},{"x":3,"y":3,"value":152667,"name":"Macedonian"},{"x":3,"y":4,"value":22070,"name":"Macedonian"},{"x":4,"y":0,"value":564318,"name":"Armenian"},{"x":4,"y":1,"value":686099,"name":"Armenian"},{"x":4,"y":2,"value":392295,"name":"Armenian"},{"x":4,"y":3,"value":596224,"name":"Armenian"},{"x":4,"y":4,"value":154656,"name":"Armenian"},{"x":5,"y":0,"value":208512,"name":"Russian"},{"x":5,"y":1,"value":236867,"name":"Russian"},{"x":5,"y":2,"value":359173,"name":"Russian"},{"x":5,"y":3,"value":262347,"name":"Russian"},{"x":5,"y":4,"value":146199,"name":"Russian"},{"x":6,"y":0,"value":264090,"name":"Ukrainian"},{"x":6,"y":1,"value":392413,"name":"Ukrainian"},{"x":6,"y":2,"value":427684,"name":"Ukrainian"},{"x":6,"y":3,"value":227860,"name":"Ukrainian"},{"x":6,"y":4,"value":39206,"name":"Ukrainian"},{"x":7,"y":0,"value":8339,"name":"Serbian"},{"x":7,"y":1,"value":8678,"name":"Serbian"},{"x":7,"y":2,"value":14433,"name":"Serbian"},{"x":7,"y":3,"value":13883,"name":"Serbian"},{"x":7,"y":4,"value":3745,"name":"Serbian"}]},{"id":"Latin America","data":[{"x":0,"y":0,"value":201832,"name":"Spanish"},{"x":0,"y":1,"value":434860,"name":"Spanish"},{"x":0,"y":2,"value":176866,"name":"Spanish"},{"x":0,"y":3,"value":488946,"name":"Spanish"},{"x":0,"y":4,"value":73171,"name":"Spanish"},{"x":1,"y":0,"value":521261,"name":"Creole"},{"x":1,"y":1,"value":472913,"name":"Creole"},{"x":1,"y":2,"value":297366,"name":"Creole"},{"x":1,"y":3,"value":556610,"name":"Creole"},{"x":1,"y":4,"value":224405,"name":"Creole"}]},{"id":"News Network","data":[{"x":0,"y":0,"value":192253,"name":"Persian"},{"x":0,"y":1,"value":238947,"name":"Persian"},{"x":0,"y":2,"value":324038,"name":"Persian"},{"x":0,"y":3,"value":318308,"name":"Persian"},{"x":0,"y":4,"value":95326,"name":"Persian"}]},{"id":"South & Central Asia","data":[{"x":0,"y":0,"value":4190212,"name":"Afghanistan"},{"x":0,"y":1,"value":3970923,"name":"Afghanistan"},{"x":0,"y":2,"value":4584039,"name":"Afghanistan"},{"x":0,"y":3,"value":4032404,"name":"Afghanistan"},{"x":0,"y":4,"value":1174856,"name":"Afghanistan"},{"x":1,"y":0,"value":100666,"name":"Azerbaijani"},{"x":1,"y":1,"value":256548,"name":"Azerbaijani"},{"x":1,"y":2,"value":304740,"name":"Azerbaijani"},{"x":1,"y":3,"value":119023,"name":"Azerbaijani"},{"x":1,"y":4,"value":15835,"name":"Azerbaijani"},{"x":2,"y":0,"value":44664,"name":"Bangla"},{"x":2,"y":1,"value":50071,"name":"Bangla"},{"x":2,"y":2,"value":870104,"name":"Bangla"},{"x":2,"y":3,"value":1347291,"name":"Bangla"},{"x":2,"y":4,"value":179944,"name":"Bangla"},{"x":3,"y":0,"value":2846549,"name":"Deewa"},{"x":3,"y":1,"value":3192405,"name":"Deewa"},{"x":3,"y":2,"value":11910043,"name":"Deewa"},{"x":3,"y":3,"value":3620057,"name":"Deewa"},{"x":3,"y":4,"value":926139,"name":"Deewa"},{"x":4,"y":0,"value":920303,"name":"Kurdish"},{"x":4,"y":1,"value":2042245,"name":"Kurdish"},{"x":4,"y":2,"value":801176,"name":"Kurdish"},{"x":4,"y":3,"value":633152,"name":"Kurdish"},{"x":4,"y":4,"value":99908,"name":"Kurdish"},{"x":5,"y":0,"value":227898,"name":"Turkish"},{"x":5,"y":1,"value":380037,"name":"Turkish"},{"x":5,"y":2,"value":380962,"name":"Turkish"},{"x":5,"y":3,"value":330915,"name":"Turkish"},{"x":5,"y":4,"value":60388,"name":"Turkish"},{"x":6,"y":0,"value":4474294,"name":"Urdu"},{"x":6,"y":1,"value":3199688,"name":"Urdu"},{"x":6,"y":2,"value":3735431,"name":"Urdu"},{"x":6,"y":3,"value":3704193,"name":"Urdu"},{"x":6,"y":4,"value":1048837,"name":"Urdu"},{"x":7,"y":0,"value":48347,"name":"Uzbek"},{"x":7,"y":1,"value":57665,"name":"Uzbek"},{"x":7,"y":2,"value":78666,"name":"Uzbek"},{"x":7,"y":3,"value":44979,"name":"Uzbek"},{"x":7,"y":4,"value":26041,"name":"Uzbek"}]}],
borderWidth: 1,
dataLabels: {
enabled: true,
color: "#000000",
},
},
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
yAxis: {
labels: {
format: '{substr value 0 1}'
}
}
}
}]
}
});<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>不确定出现了什么问题，因为向下钻取设置正确。另请注意，如何仅使 xAxis 可点击。不要更改值以仅链接 xAxis 类别。
您能解释一下您所说的“钻取不能正常工作”是什么意思吗？当我点击你的任何一点时，图表将我转移到深入研究系列。看起来不错。
这里还有一个非常简单的演示，其中包含热图钻取系列供参考：https://jsfiddle.net/BlackLabel/xc94b6w0/
series: [{
colorByPoint: true,
data: [{
x: 1,
y: 0,
value: 100,
drilldown: 'A'
}, {
x: 1,
y: 1,
value: 10,
drilldown: 'B'
}]
}],
关于可点击的 xAxis，如果您愿意向 xAxis 标签添加一些事件，我建议使用 Blacklabel 开发的名为 custom-events 的自定义插件。以下是文档：https://github.com/blacklabel/custom_events