我的应用程序中有两个图表，一个是柱状图，另一个是饼图。在第一列图表中，我显示了多年的汽车销售量，并在向下钻取一年时显示了销售y季度。然后有一个单独的饼图，显示了按地区划分的汽车销量。向下钻取区域后，将显示所选区域中按子区域划分的汽车销量。 我想要的是同步这两个图表。作为示例，最初的柱形图显示了多年的销售量，饼形图显示了区域的销售量。当我单击“年份”时，它应向下钻取以按季度显示销售额，并且饼图也应更新以按区域显示销售额，但仅在柱状图中显示该选定年份。我尝试了几种方法，但无法解决。有没有解决的办法。
以下是我使用的示例代码。 https://jsfiddle.net/yasirunilan/erqm86k7/15/
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Car Sales'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total percent Car Sales'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
"series": [
{
"name": "Years",
"colorByPoint": true,
"data": [
{
"name": "2015",
"y": 62.74,
"drilldown": "2015"
},
{
"name": "2016",
"y": 10.57,
"drilldown": "2016"
},
{
"name": "2017",
"y": 7.23,
"drilldown": "2017"
},
{
"name": "2018",
"y": 5.58,
"drilldown": "2018"
},
]
}
],
"drilldown": {
"series": [
{
"name": "2015",
"id": "2015",
"data": [
{
"name": "Q1",
"y": 0.4
},
{
"name": "Q2",
"y": 0.3
},
{
"name": "Q3",
"y": 0.2
},
{
"name": "Q4",
"y": 0.1
}
]
},
{
"name": "2016",
"id": "2016",
"data": [
{
"name": "Q1",
"y": 0.1
},
{
"name": "Q2",
"y": 0.2
},
{
"name": "Q3",
"y": 0.2
},
{
"name": "Q4",
"y": 0.1
}
]
},
{
"name": "2017",
"id": "2017",
"data": [
{
"name": "Q1",
"y": 0.1
},
{
"name": "Q2",
"y": 0.3
},
{
"name": "Q3",
"y": 0.2
},
{
"name": "Q4",
"y": 0.1
}
]
},
{
"name": "2018",
"id": "2018",
"data": [
{
"name": "Q1",
"y": 0.1
},
{
"name": "Q2",
"y": 0.1
},
{
"name": "Q3",
"y": 0.3
}
]
}
]
}
});
// Create the chart
Highcharts.chart('container-pie', {
chart: {
type: 'pie'
},
title: {
text: 'Car Sales by Region'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total percent Car Sales'
}
},
legend: {
enabled: true
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
"series": [
{
"name": "Years",
"colorByPoint": true,
"data": [
{
"name": "Asia",
"y": 62.74,
"drilldown": "Asia"
},
{
"name": "Europe",
"y": 10.57,
"drilldown": "Europe"
},
{
"name": "America",
"y": 7.23,
"drilldown": "America"
},
{
"name": "Australia",
"y": 5.58,
"drilldown": "Australia"
},
]
}
],
"drilldown": {
"series": [
{
"name": "Asia",
"id": "Asia",
"data": [
{
"name": "India",
"y": 0.1
},
{
"name": "Sri Lanka",
"y": 0.2
},
{
"name": "Japan",
"y": 0.3
},
{
"name": "Sigapoore",
"y": 0.4
}
]
},
{
"name": "Europe",
"id": "Europe",
"data": [
{
"name": "UK",
"y": 0.1
},
{
"name": "Russia",
"y": 0.2
},
{
"name": "France",
"y": 0.3
},
{
"name": "Germany",
"y": 0.4
}
]
},
{
"name": "America",
"id": "America",
"data": [
{
"name": "North America",
"y": 0.3
},
{
"name": "South America",
"y": 0.4
}
]
},
{
"name": "Australia",
"id": "Australia",
"data": [
{
"name": "New Zeeland",
"y": 0.1
},
{
"name": "Australia",
"y": 0.5
}
]
}
]
}
});
答案 0 :(得分：6)
您需要实现一个函数，该函数将对您拥有的所有图表进行迭代，并在其中具有相同索引的点（以您之前单击的点为基础）调用doDrilldown()函数。调用创建的函数的最佳位置是chart.events.drilldown和chart.events.drillup处理程序。
以下是示例函数及其用法：
function syncCharts(e, chart) {
return e.type === 'drilldown' ?
Highcharts.charts.forEach(c => {
if (c !== chart) {
var series = c.series[0],
point = series.points[e.point.index];
point.doDrilldown()
}
}) :
Highcharts.charts.forEach(c => {
c.drillUp();
})
}
用法：
chart: {
type: 'column',
events: {
drilldown(e) {
syncCharts(e, this)
},
drillup(e) {
syncCharts(e, this)
}
}
},
实时示例： https://jsfiddle.net/9am0srkq/
API参考：
https://api.highcharts.com/highcharts/chart.events.drilldown