高图通过动画更新数据

时间:2018-09-05 09:50:07

标签: highcharts

我想在某些事件中更新数据时在Highmap中添加一些动画。在下面的代码段中,我已经设置了一个演示。 我尝试了chart.redraw(),但地图上仍然没有动画。

chart = Highcharts.mapChart('map', {
    chart: {
        map: 'countries/in/custom/in-all-disputed'
    },

    title: {
        text: false
    },

    exporting: {
        enabled: false
    },
    subtitle: {
        text: false
    },

    mapNavigation: {
        enabled: true,
        buttonOptions: {
            verticalAlign: 'bottom'
        }
    },
    credits: {
        enabled: false
    },
    colorAxis: {
        min: 0
    },

    series: [{
        animation: true,
        data: [
                ['in-or', 489],
                ['in-jh', 973]
            ],
        name: 'Household',
        states: {
            hover: {
                color: '#3C3F4B'
            }
        },
        dataLabels: {
            enabled: false,
            format: '{point.name}'
        }
    }]
});

$("#update").on('click', function(){
  chart.series[0].update({name:'new title'});
                chart.series[0].setData([
                                ['in-or', 1200],
                                ['in-jh', 1200]
                                ]);
                                
})
#map{
  height:500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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/in/custom/in-all-disputed.js"></script>
    <button id="update"> UPDATE </button>
<div id="map">

0 个答案:

没有答案