javascript - jquery 图表应该显示没有数据的刻度标签

Question

我有这样的图表 reference links 您可以关闭系列，但不会更改数据图表的大小。就我而言，它不会这样做。我想一直显示刻度标签或制作具有固定绘图的图表。我怎样才能做到这一点？

$(function () {
    $('#container').highcharts({

        title: {
            text: 'Y axis showEmpty demo'
        },

        subtitle: {
            text: 'Left axis shows even if Series 1 is hidden. Right axis does not show when Series 2 is hidden.'
        },

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        yAxis: [{
            lineWidth: 2
            // showEmpty: true // by default
        }, {
            lineWidth: 2,
            opposite: true,
            showEmpty: true,
            min:0
        }],

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            yAxis: 0
        }, {
            data: [106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5],
            yAxis: 1,
            visible: false
        }]
    });
});

Answer 1

一种方法是设置轴的最小值和最大值。

参见示例:

• http://jsfiddle.net/jlbriggs/Lpgxoo0e/

{{ 编辑以解决评论:

为什么要在没有数据的时候设置一个max，有数据的时候去掉？ 只需找出数据中的最大值，并相应地进行设置即可。

简单地“取消设置”最小值和最大值是不可能的 - 它们必须设置为某物(它们总是设置为某物，无论你选择什么，或者图书馆选择......)

如果您不想预处理数据以获得最大值，您可以做的是在图表调用上设置回调函数，并使用 getExtremes() 和 setExtremes() 函数来明确地将最小值/最大值设置为 Highcharts 自然会使用的值。

• http://api.highcharts.com/highcharts#Axis.getExtremes

• http://api.highcharts.com/highcharts#Axis.setExtremes

在这种情况下，您还需要将所有系列默认设置为可见，并在设置轴最小/最大值后隐藏它们。

例子:

• http://jsfiddle.net/jlbriggs/Lpgxoo0e/5/

{{编辑

好的，再来一个:

• http://jsfiddle.net/jlbriggs/oretk9m3/

这使用相同的函数，但从 legendItemClick 事件调用它，这需要稍微复杂一些。