我正在尝试使用HTML selection box
库中的highmaps
和highcharts
来突出显示我选择时地图的不同部分。但颜色没有显示,请在jsfiddle中查看我的代码,谢谢。
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/tw/tw-all.js"></script>
<div align="center" style="font-size:110%">
Product:
<select name='location' onchange="updateChart(this.value)" style="font-size:110%">
<option value="" selected value="">Select</option>
<option value="orange">Orange</option>
<option value="cabbage">Cabbage</option>
<option value="peanut">Peanut</option>
</select>
</div>
<br>
<div id="container" style="height: 500px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
var data_orange = [
['tw-pt', 1],
['tw-ml', 1],
['tw-il', 1]
];
var data_cabbage = [
['tw-hl', 1],
['tw-nt', 1]
];
var data_peanut = [
['tw-tw', 1],
['tw-tp', 1]
];
var data_series = [
{name: 'orange',
data: data_orange},
{name: 'cabbage',
data: data_cabbage},
{name: 'peanut',
data: data_peanut},
];
// Instanciate the map
Highcharts.mapChart('container', {
chart: {
borderWidth: 1
},
title: {
text: 'December product map'
},
subtitle: {
text: 'Data Source: AFA Taiwan'
},
legend: {
enabled: false
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
series: [{
name: 'Country',
mapData: Highcharts.maps['countries/tw/tw-all'],
data: [
data_series
],
color: '#ff0066',
dataLabels: {
enabled: true,
color: '#FFFFFF',
formatter: function() {
if (this.point.value) {
return this.point.name;
}
}
},
tooltip: {
headerFormat: '',
pointFormat: '{point.name}'
}
}],
});
window.updateChart = function(selection) {
if (selection == "") {
Highcharts.mapChart.series = [data_series];
} else if (selection == "orange") {
//console.log(data_series[0].data)
Highcharts.mapChart.series.data = data_series[0].data;
} else if (selection == "cabbage") {
Highcharts.mapChart.series.data = data_series[1].data;
} else if (selection == "peanut") {
Highcharts.mapChart.series.data = data_series[2].data;
}
console.log(Highcharts.mapChart.series.data)
//Highcharts.chart('container', chartOptions);
}
//start rendering----------------------------------------------
updateChart("");
答案 0 :(得分:2)
您可以将代码更新为
var data_orange = [
['tw-pt', 1],
['tw-ml', 1],
['tw-il', 1]
];
var data_cabbage = [
['tw-hl', 1],
['tw-nt', 1]
];
var data_peanut = [
['tw-tw', 1],
['tw-tp', 1]
];
var all_data = [
['tw-pt', 1],
['tw-ml', 1],
['tw-il', 1],
['tw-hl', 1],
['tw-nt', 1],
['tw-tw', 1],
['tw-tp', 1],
]
var data_series = [{
name: 'orange',
data: data_orange
}, {
name: 'cabbage',
data: data_cabbage
}, {
name: 'peanut',
data: data_peanut
}, {
name: 'All',
data: all_data,
}];
var chart;
function createChart(chartData) {
// Instanciate the map
chart = new Highcharts.mapChart('container', {
chart: {
borderWidth: 1
},
title: {
text: 'December product map'
},
subtitle: {
text: 'https://stackoverflow.com/questions/47646879/cant-show-the-color-in-interactive-highchart-choropleth-map'
},
legend: {
enabled: false
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
series: [{
name: 'Country',
mapData: Highcharts.maps['countries/tw/tw-all'],
data: chartData,
dataLabels: {
enabled: true,
color: '#FFFFFF',
formatter: function() {
if (this.point.value) {
return this.point.name;
}
}
},
tooltip: {
headerFormat: '',
pointFormat: '{point.name}'
}
}]
});
}
window.updateChart = function(selection) {
if (selection == "") {
createChart(data_series[3].data);
} else if (selection == "orange") {
createChart(data_series[0].data)
} else if (selection == "cabbage") {
createChart(data_series[1].data)
} else if (selection == "peanut") {
createChart(data_series[2].data)
}
}
//start rendering----------------------------------------------
updateChart("");
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/tw/tw-all.js"></script>
<div align="center" style="font-size:110%">
Product:
<select name='location' onchange="updateChart(this.value)" style="font-size:110%">
<option value="" selected value="">Select</option>
<option value="orange">Orange</option>
<option value="cabbage">Cabbage</option>
<option value="peanut">Peanut</option>
</select>
</div>
<br>
<div id="container" style="height: 500px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>