Question

我尝试了highcharts。但是没有选项可以使用范围滑块来更改地图颜色。

我需要一张马来西亚地图，其中状态会根据滑块的颜色而变化。 D3 js只有带有滑动条的美国州。

var data = [
['my-sa', 0],
['my-sk', 1],
['my-la', 2],
['my-pg', 3],
['my-kh', 4],

 ];

// Create the chart
Highcharts.mapChart('container', {
chart: {
    map: 'countries/my/my-all'
},

title: {
    text: 'Highmaps basic demo'
},

subtitle: {
    text: 'Source map: <a href="http://code.highcharts.com/mapdata/countries/my/my-all.js">Malaysia</a>'
},

mapNavigation: {
    enabled: true,
    buttonOptions: {
        verticalAlign: 'bottom'
    }
},

colorAxis: {
    min: 0
},

series: [{
    data: data,
    name: 'Random data',
    states: {
        hover: {
            color: '#BADA55'
        }
    },
    dataLabels: {
        enabled: true,
        format: '{point.name}'
    }
}, {
    name: 'Separators',
    type: 'mapline',
    data: Highcharts.geojson(Highcharts.maps['countries/my/my-all'], 'mapline'),
    color: 'silver',
    showInLegend: false,
    enableMouseTracking: false
}]

}）;

有什么想法吗？

Answer 1

使用高图实现范围滑块非常容易。我准备了一个有关马来西亚地图的示例：

$('#slider').on('input', function(e) {
    ...
    chart.series[0].setData(data[this.value]);
});

实时演示：http://jsfiddle.net/BlackLabel/rkutdxva/

API：https://api.highcharts.com/class-reference/Highcharts.Series#setData

带有范围滑块JS的马来西亚的Choropleth地图

1 个答案: