添加新列時的Highchart列動畫

Question

我正在嘗試制作一個簡單的條形圖，使用高圖每5秒更新一次。 以下是我的代碼：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
                <script src="https://code.highcharts.com/highcharts.js"></script>
                <script src="https://code.highcharts.com/modules/exporting.js"></script>
                <script src="underscore-min.js"></script>
    </head>
    <body>
        <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
    </body>
        <script>

                Highcharts.chart('container', {
                        chart: {
                                type: 'column'
                        },
                        title: {
                                text: 'Activity Count per Model'
                        },
                        xAxis: {
                                categories: [],
                                crosshair: true,
                                title: {
                                        text: 'Model'
                                }
                        },
                        yAxis: {
                                min: 0,
                                title: {
                                        text: 'Activity Count'
                                }
                        },
                        plotOptions: {
                                column: {
                                        animation: true,
                                        pointPadding: 0.2,
                                        borderWidth: 0
                                }
                        },
                        series: [{
                                name: 'Count',
                                data: []

                        }]
                });

                setInterval(function(){
                        $.getJSON("http://localhost/getdata.php", function(data){
                                $('#container').highcharts().series[0].setData(data.value,true);
                                $('#container').highcharts().xAxis[0].setCategories(data.model);
                        });
                }, 5000);

        </script>
</html>

從JSON調用返回的數據：

{"model":["a","aa","aaa","aaaa","aab","b","c","d","e"],"value":[40,20,70,40,70,20,30,40,50]}

現在功能上代碼工作正常（圖表顯示每5秒更新一次的數據）。 問題是，如果圖表使用新列更新，則表示沒有動畫。 但是如果在不添加新列的情況下更新現有數據，則會在其中顯示動畫（列增長/縮小，其他列調整，如果軸更改）。 將新列插入圖表時如何啟用動畫？

Answer 1

在這種情況下，圖表應該如何動畫有不同的可能性。 所以你應該考慮你想要的動畫。

來自setData（） docs：

當更新的數據與現有數據的長度相同時，默認情況下將更新點，動畫會顯示點的更改方式。

在您的情況下，您可以將數據分為兩部分 - 新點和其余數據。 其余數據可以使用setData()設置 - 您將保留動畫，因為舊數據和新數據具有相同的長度。 並且可以通過addPoint（）添加動畫點。

$('#button').click(function () {
  const data = new Array(12).fill(2)
  chart.xAxis[0].setCategories(categories.concat('13'), false);
  chart.series[0].setData(data);
  chart.series[0].addPoint(40, true, false, true);
});

示例： http ： //jsfiddle.net/Lqy2e42h/

添加新列時的Highchart列動畫

問題描述

1 個解決方案

解決方案1
0 2017-02-24 13:01:24

添加新列時的Highchart列動畫

問題描述

1 個解決方案

解決方案1 0 2017-02-24 13:01:24

解決方案1
0 2017-02-24 13:01:24