Question

当我在柱形图上为我的系列添加点时，动画看起来很糟糕，新列只显示在右侧，然后其他所有内容都滑过以容纳它们。例如：http://jsfiddle.net/jamesredwood/a0p4pqe8/

如果可以将新数据添加到视图之外，并且只是在其他所有内容移动的同时滑入视图，那将会更好。

有没有办法实现这个目标？

Highcharts.chart('container', {
chart: {
    type: 'column',
    margin: [70, 50, 60, 80],
    events: {
        click: function (e) {
            // find the clicked values and the series
            var x = Math.round(e.xAxis[0].value),
                y = Math.round(e.yAxis[0].value),
                series = this.series[0];

            // Add it
            series.addPoint([x, y]);

        }
    }
},
title: {
    text: 'User supplied data'
},
subtitle: {
    text: 'Click the plot area to add a point. Click a point to remove it.'
},
xAxis: {
    gridLineWidth: 1,
    minPadding: 0.2,
    maxPadding: 0.2,
    maxZoom: 60
},
yAxis: {
    title: {
        text: 'Value'
    },
    minPadding: 0.2,
    maxPadding: 0.2,
    maxZoom: 60,
    plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
    }]
},
legend: {
    enabled: false
},
exporting: {
    enabled: false
},
plotOptions: {
    series: {
        lineWidth: 1,
        point: {
            events: {
                'click': function () {
                    if (this.series.data.length > 1) {
                        this.remove();
                    }
                }
            }
        }
    }
},
series: [{
    data: [[20, 20], [80, 80]]
}]

}）;

Answer 1

您可以在y值为0的适当位置添加点，在所有点中找到其索引并使用Point.update函数更新其y值以获得更新动画。看看下面发布的示例。

API参考：
https://api.highcharts.com/class-reference/Highcharts.Series.html#addPoint
https://api.highcharts.com/class-reference/Highcharts.Point#update

例：
http://jsfiddle.net/m3atf59f/

使用series.addPoint（）制作Highcharts列的动画

1 个答案: