Highcharts 高图、不同类别数和系列数据

我有一张图表显示了1995年至2030年的目标。我需要这个系列在今年停止

x轴：

xAxis: {
            categories: ['1995', '1996', '1997', '1998', '1999', '2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2015', '2016', '2017','2018', '2019', '2020', '2021', '2022', '2023', '2024', '2025', '2026', '2027' , '2028', '2029', '2030'],
            tickmarkPlacement: 'on',
            title: {
                enabled: false
            }
        },

该系列：

series: [{
            name: 'Consumption',
            data: [5020, 4350, 3090, 2500, 2100, 800]
        }],

如果我这样做，类别将自动与系列数据的数量匹配

是否有任何选项可以保留所有类别

---

有多种方法可以做到这一点，但答案2在您的情况下可能是最有用的

1对未知数据使用空值

如果您在某些年份缺少数据，并且希望间歇停止图表，您可以在序列数据中以“空”形式写入未知数据，正如@wergeld在上面的评论中提到的那样

如果您正在以编程方式为图形填充数据，并且您的程序正在依次处理每个类别，那么这将非常有用。如果您只有2000年之前的数据，那么您的程序应该工作到您的年终或任何其他年终类别，在没有可用数据的序列中放置空值

2将pointStart和max与日期时间图表一起使用

鉴于您正在处理年份，您可以使此图表更有效地显示您的系列。您可以选择开始年份点开始年份和结束年份最大值；您的数据从开始年份开始，系列将持续到年底

您的xAxis将更改为：

xAxis: {
    type: 'datetime',
    max: Date.UTC(2030, 0, 1)
}

您需要一些打印选项*：

plotOptions: {
    series: {
        pointStart: Date.UTC(1995, 0, 1),
        pointIntervalUnit: 'year'
    }
}

这里的示例：

如果某些年份缺少数据，可以按照方法1所述，在序列数据中用空值填充这些数据，但图形仍将持续到最长年份

*在处理这个示例时，我发现您正在使用的AngularJS Highcharts库Highcharts ng期望plotOptions的处理方式与本机Highcharts JS不同。因此，上面的示例适用于您的库，但对于其他所有人，您都需要在“选项”对象之外设置plotOptions

3使用函数计算序列的长度

如果你的图表不只是处理年份和/或你想要一个离散序列，你可以使用xAxis上的max属性和一个聪明的函数来计算你有多少类别。在Highcharts中包含此函数的最佳方法似乎是在图表的load事件中

您需要调整图表*选项以包括事件：

chart: {
    events: {
        load: function () {                        
            var totalValues = this.xAxis[0].categories.length;
            this.xAxis[0].setExtremes(0 , totalValues - 1 );
        }
    }
}

示例如下：

---

*与方法2一样，使用AngularJS的highcharts ng库时的“图表”选项位于“选项”对象内。

用0填充数据？最简单的方法是将series.data中没有数据的年份设置为null。如数据：[50204350、3090、2500、2100、null、null、null、…、null]或将xAxis.max设置为32:或更好，这样您就不必手动计算类别长度：