X轴范围根据隐藏的系列进行更改

X-axis range changes based on hidden Series

本文关键字：系列 隐藏 范围      更新时间：2023-09-26

我在一个图上有两个系列。一次只能显示一个系列，但隐藏图形会影响x轴上的范围。

数据是通过PHP动态生成的，但这里有两个技巧来说明我的意思：

篡改改变的规模和隐藏的数据

篡改已删除的隐藏数据和正确的比例

这个代码片段是为了确保在任何给定的时间只能显示一个系列。

events: {
    show: function () {
        var chart = this.chart,
            series = chart.series,
            i = series.length,
            otherSeries;
            var seriesName = this['options']['name'];
            chart.yAxis[0].axisTitle.attr({
                text: seriesName
            });
        while (i--) {
            otherSeries = series[i];
            if (otherSeries != this && otherSeries.visible) {
                otherSeries.hide();
            }
        }
    }

我不知道为什么有隐藏数据的图会显示到16:00，而没有任何额外数据的图则会显示到15:38的最后一个数据点。

Highcharts似乎考虑了具有最大pointRange的系列的pointRange（尽管它是隐藏的），并在此基础上显示x轴。你的"通话/小时"系列的范围是1小时，所以它确保了如果该系列在最后有一个点，它仍然有显示的空间。

我不确定是否有任何优雅的方法来解决这个问题，但在您的情况下，有一点"破解"是将所有系列的pointRange更改为当前显示的系列。

我的粗略实现对您的代码有三个更改：

  1. 默认情况下为visible: false的系列也会获得pointRange: 1，这样它们就不会破坏唯一可见系列的x轴范围。

  2. 创建图表后，我们会存储每个系列的正确点范围，以备将来参考，例如使用回调函数：

    $('#callFrequencyGraph').highcharts({
    // Options...
}, function(event) {
    var series = this.series;
    // Store the correct point ranges
    for(var i = 0; i < series.length; i++) {
        series[i].update({
            historicalPointRange: (series[i].closestPointRange ? series[i].closestPointRange : 3600000)
        }, false);
        this.redraw();
    }
}

  3. 扩展您的events.legendItemClick功能，将所有系列pointRange更新为点击完成后将显示的系列：

    legendItemClick: function() {
    if(this.visible){
         return false;
    }
    else {
        var series = this.chart.series;
        for(var i = 0; i < series.length; i++) {
            series[i].update({ 
                pointRange: this.options.historicalPointRange 
            }, false);
        }
    }
}

有关所有这些更改的结果，请参阅此更新的JSFiddle。编辑：错误的jsFiddle更新

相关文章：