javascript - 为什么很难根据固定柱形图(highcharts)中的数据动态设置点填充和放置？

Question

所以，我是 highcharts 的新手，我陷入了困境。我在 Highcharts 中看到了两个图表。以下链接中的图表

'http://jsfiddle.net/v5618cwk/'

这里的点区间是通过公式'24 * 3600 * 1000'动态添加的，所以当数据增加时，它会动态创建点区间。然后我遇到了固定柱形图。

' http://jsfiddle.net/cf9xe3f0/ '

我尝试了很多，但我无法在数据增加时动态创建填充和位置。

我不知道为什么这很困难，这是一项具有挑战性的任务。

请帮我处理这个案例。谢谢

Answer 1

因为我不知道你的新系列会是什么样子，这里是一个通用的方法。您需要添加系列并更改 pointPlacement。为此，首先将您的 pointPlacement 更改为某个适当的值并添加您的新系列。我通过单击按钮完成了此操作，但总体思路适用于任何方法:

$('#button').click(function () {
    var chart = $('#container').highcharts();

    for (i = 0; i < chart.series.length; i++) {
        if (chart.series[i].options.yAxis === 0) {
            chart.series[i].update({
                //pointPadding: 0.4,
                pointPlacement: -0.4
            });
        } else {
            chart.series[i].update({
                //pointPadding: 0.4,
                pointPlacement: 0.4
            });
        }
    }

    chart.addSeries({
        name: 'A New Series',
        color: 'green',
        data: [300, 150, 350],
        tooltip: {
            valuePrefix: '$',
            valueSuffix: ' M'
        },
        pointPadding: 0.4,
        pointPlacement: 0.1,
        yAxis: 1
    });
});

要理解的关键是series.update()和 chart.addSeries() .您可以添加该系列，然后也进行全局更新。根据您拥有的新系列的数量，您可能会达到一个上限，无论您做什么，它看起来都不太好。

直播demo .