在Highcharts上自动分割y轴(如果series'价值观不相似

Automatically split y-axis on Highcharts if series' values are not similar

本文关键字:series 如果 不相似 价值观 Highcharts 分割      更新时间:2023-09-26

我有一个页面,允许人们从一组值中选择要绘制的值,有时这些值会非常不同,例如系列a的值为1-10,系列b的值为1000-1200。

现在,这将使系列A非常难以阅读,但这可以通过将其放在不同的y轴上来解决。

有没有人这样做与Highcharts之前/知道一个很好的方式来处理它?

我想我以前见过这个插件(我现在找不到)。

另一种方法是找到每行的最小值和最大值,并手动将它们分开。

如何使用两个单独的yAxes?就像这样:http://jsfiddle.net/p8f8ko6z/

$('#container').highcharts({
    xAxis: [{
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    }],
    yAxis: [{ // Primary yAxis
    }, { // Secondary yAxis
        opposite: true
    }],
    series: [{
        yAxis: 1,
        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }]
});

所以无论你有什么数据,总是使用两个单独的轴。您可以添加特定的颜色和标题来显示哪个系列连接到哪个轴。

在系列选项中,当您构建图表时,您可以指定第二个y轴:

Series: {
  yAxis: 1
}

series.area.yAxis

您还可以将yAxis彼此分开:

两个窗格,烛台和体积