Question

我有一张图表显示了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]
        }],

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

我可以选择保留所有类别吗？

http://jsfiddle.net/zh4yukL8/1/

Answer 1

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

1）对未知数据使用空值

如果您缺少某些年份的数据（并且您希望间歇性地停止图表），则可以将未知数据写为系列数据中的“空”（如上文评论中@wergeld所述）。

如果您以编程方式填写图表的数据并且您的程序依次处理每个类别，这将非常有用。如果您的数据只有2000年，那么您的程序应该可以使用到您的结束年份（或任何其他结束类别），在没有数据的系列中放置空值。

2）使用pointStart＆amp;最大日期时间表

看到你正在处理多年，你可以使这个图表更有效地展示你的系列。您可以选择开始年份（pointStart）和结束年份（最大）;您的数据从开始年份开始，系列一直持续到结束年份。

您的xAxis将更改为：

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

你需要一些plotOptions *：

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

此处示例：http://jsfiddle.net/zh4yukL8/5/。

如果您缺少数年的数据，您可以在系列数据中使用空值填充这些数据，方法（1）解释，但图表将一直持续到最大年份。

*在玩这个例子时，我发现你正在使用的AngularJS Highcharts库（highcharts-ng）期望plotOptions与原生Highcharts JS的处理方式不同。因此，上面的示例适用于您的库，但对于其他人，您需要在'options'对象之外使用plotOptions。

3）使用函数计算系列的长度

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

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

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

此处示例：http://jsfiddle.net/zh4yukL8/6/

*与方法（2）一样，使用AngularJS的highcharts-ng库时的'chart'选项位于'options'对象内。

Highchart，不同类别和系列数据

1 个答案: