javascript - 从 x 轴重绘问题中删除数据点

Question

从加载事件中的图表中删除数据点时，我们会遇到奇怪的行为。

我们正在使用 Highcharts JS v4.1.7 (2015-06-26)。

当系列有超过 6 个数据点时，我们删除第一个数据点，重新正确绘制图表。当系列有 6 个或更少的数据点时，删除的数据点标签仍然可见。除此之外，还添加了一个新的类别标签，这似乎是类别的原始数量(例如 6)。请参阅下面的屏幕截图:

工作:

不工作:

这是我们在示例中使用的加载事件代码，但它不起作用

$(function () {
// create the chart
$('#container').highcharts({
    chart: {
        events: {
            load: function () {
                var chart = $('#container').highcharts(),
                    series = chart.series[0];
                if (series.data.length) {
                    chart.series[0].data[0].remove();
                }
            }
        }
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0]
    }]
});

});

以下是 JsFiddle 示例，显示它既可以工作也可以不工作

• 工作 - http://jsfiddle.net/arty_/418xcrq9/
• 不工作 - http://jsfiddle.net/arty_/0cu5cu9t/

关于如何解决这个问题的任何建议

干杯

Answer 1

这是因为 xAxis minRange 行为 ( docs ) 控制轴应显示的最小范围。在您的情况下，这默认为 5，这解释了为什么即使您失去点数，它也会尝试保持更宽的轴。将 minRange 设置为较低的值(例如 1)，您就不会有任何问题!

xAxis: {
    minRange: 1,
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
},

New Fiddle