javascript - 带 x 和 y 轴的 Highcharts 空白图表

Question

我想使用 highcharts 创建一个没有数据但 x 和 y 轴的空白图表。怎么做？

var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container'
    },

    yAxis: {        
        labels: {
            formatter: function() {
                return this.value +' km';
            }
        }
    },

    series: [{
        data: []        
    }]

});

它返回

但我想用标签显示 y 轴。

Answer 1

您可以输入 xAxis 和 yAxis 的最小/最大值，并对所有数据使用 null。

从@ZaheerAhmed的上述回复中分叉出来，因为我认为它应该作为替代解决方案而无需在事后隐藏数据。

IE

yAxis: {
   min: 1,
   max:
} ,
xAxis: {
   min: 1,
   max: 50
},
series: {
   data:[null,null]
}

Answer 2

您可以在设置属性后放置数据并隐藏系列

ignoreHiddenSeries : false

这是工作演示如果您隐藏系列 Y 轴仍然可见。

Answer 3

FWIW，似乎 highcharts 在yAxis.showEmpty中内置了这个功能

Unfortunately, the fiddle listed in the documentation doesn't work, and there is a related open highcharts issue on the matter:

no hide y axis

Answer 4

Setting min and max for xAxis and yAxis is not a good solution! Because if the data is loaded later (When it's resolved), then you won't have auto calculated min and max. In Highcharts API, it's said:

If null, the max value is automatically calculated

So you should set min and max back to null when the data is loaded. But in my case setting it to null or even deleting the option, didn't result in automatic calculating (Seems strange).

What I did instead was setting charts.showAxes to true! That's it. Take a look at the demo provided by Highcharts

重要提示：您当然需要将系列设置为以下内容：

series: [
  {
    data: [null, null, null]
  },
  {
    data: [null, null, null]
  }
]

注意：确保xAxis.showEmpty和yAxis.showEmpty设置为 true（默认为 true）。