时间戳

首页 > 解决方案 > 带有范围滑块 JS 的马来西亚等值线图

javascript - 带有范围滑块 JS 的马来西亚等值线图

问题描述

我试过用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
}]

});

有什么想法吗？

标签： javascriptjqueryd3.jshighchartschoropleth

解决方案

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

$('#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

推荐阅读