Highcharts:从地图向下钻取到图表
Highcharts: Drilldown from map to chart
请考虑Kuwait
地图:
我希望当用户单击一个州(例如 - Al Jahrah)时,会出现 Al Jahrah 系列的柱形图。例如:
Category For: Al Jahrah Value For: Al Jahrah
--------------------------------------------------------
Cat1 10
Cat2 12
Cat3 3
我通过互联网搜索,但我只看到国家深入到各州。可能吗?
谢谢
您可以创建两个函数来负责创建不同类型的图表并在正确的事件中调用它们:
function mapChart() {
Highcharts.mapChart('container', {
chart: {
map: 'countries/kw/kw-all'
},
title: {
text: 'Highmaps basic demo'
},
subtitle: {
text: 'Source map: <a href="http://code.highcharts.com/mapdata/countries/kw/kw-all.js">Kuwait</a>'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series: [{
data: data,
name: 'Random data',
point: {
events: {
click: function() {
columnChart(this.name);
document.getElementById("back").style.display = "block"
}
}
},
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
});
document.getElementById("back").style.display = "none";
}
function columnChart(name) {
var data = [1, 2, 3];
if (name === "Al Jahrah") {
data = [2, 2, 2];
}
Highcharts.chart('container', {
title: {
text: name
},
series: [{
type: 'column',
data: data
}]
});
}
mapChart();
现场演示:https://jsfiddle.net/BlackLabel/bnsjgt4z/
您可以在下面找到从地图向下钻取到图表的另一种解决方案:
请考虑Kuwait
地图:
我希望当用户单击一个州(例如 - Al Jahrah)时,会出现 Al Jahrah 系列的柱形图。例如:
Category For: Al Jahrah Value For: Al Jahrah
--------------------------------------------------------
Cat1 10
Cat2 12
Cat3 3
我通过互联网搜索,但我只看到国家深入到各州。可能吗?
谢谢
您可以创建两个函数来负责创建不同类型的图表并在正确的事件中调用它们:
function mapChart() {
Highcharts.mapChart('container', {
chart: {
map: 'countries/kw/kw-all'
},
title: {
text: 'Highmaps basic demo'
},
subtitle: {
text: 'Source map: <a href="http://code.highcharts.com/mapdata/countries/kw/kw-all.js">Kuwait</a>'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series: [{
data: data,
name: 'Random data',
point: {
events: {
click: function() {
columnChart(this.name);
document.getElementById("back").style.display = "block"
}
}
},
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
});
document.getElementById("back").style.display = "none";
}
function columnChart(name) {
var data = [1, 2, 3];
if (name === "Al Jahrah") {
data = [2, 2, 2];
}
Highcharts.chart('container', {
title: {
text: name
},
series: [{
type: 'column',
data: data
}]
});
}
mapChart();
现场演示:https://jsfiddle.net/BlackLabel/bnsjgt4z/
您可以在下面找到从地图向下钻取到图表的另一种解决方案: