Question

我想用Highcharts代表两个时间序列。我的问题是，一个值较大，另一个值较低。当我将它们一起绘制时，具有低值的那个显示为直线。我希望能够用两种不同的尺度绘制它们，但发现不可能这样做。我把我已经拥有的内容放在jsfiddle上，代码在这里：

$(function() {
  $('#container').highcharts('StockChart', {
  rangeSelector : {
  selected : 1,
  inputEnabled: $('#container').width() > 300,
  enabled:1
  },
  chart:{type:'line'},
  series: [
  {name: 'serie with high values',
  color: 'red',
  data: [1000,2000,3000,4000]
  },
  {name: 'serie with low values',
  color: 'green',
  data: [0.1,0.2,0.3,0.4,0.5]
  },


  ],
  legend: {
  enabled:true,

            },
  })
  });

如果有人能指出我如何为每个时间序列赋予不同的比例，我将不胜感激 - 理想情况下，我想要绘制两个以上的比例，每个都有自己的比例。

Answer 1

您可以使用yAxis，例如

yAxis:[{

     },{
         opposite:true
     }],

http://jsfiddle.net/S2uyp/1/

Answer 2

由于高值和低值之间的差异非常大，因此图表看起来像这样，但如果您尝试使用以下值，那么您将看到图表看起来不错

$(function() {
  $('#container').highcharts('StockChart', {
  rangeSelector : {
  selected : 1,
  inputEnabled: $('#container').width() > 300,
  enabled:1
  },
  chart:{type:'line'},
  series: [
  {name: 'serie with high values',
  color: 'red',
  data: [10,15,30,40]
  },
  {name: 'serie with low values',
  color: 'green',
  data: [0.1,1,5,10]
  }],
  legend: {
  enabled:true
  }
  })
  });

Answer 3

this正是您想要的。

Answer 4

既然你有答案告诉你如何具体完成你的要求，那么让我添加一个从根本上解决问题的答案。

这是一个典型的例子，说明你真正需要的是两个独立的图表（通常，垂直对齐，一个在另一个上面最适合折线图，它们可以使用公共时间轴）。

这个概念似乎让一些人感到震惊，但它确实是最好的解决方案，而且有两个图表而不是一个图表确实没有负面影响。

在一个图表上绘制2个系列的问题，有2个不同的尺度，它实际上迫使用户进行不真实的比较。当您在图表上绘制2条线时，这两条线的交互通常很重要，观察者也会这样看。

当2行有2个不同的比例时，交互完全没有意义，这两行只会使图表混乱并模糊数据信息。

基本上，当您使用2个不同的比例绘制2个系列时，无论如何已经制作了2个图表 - 但是您将它们分成一个空格，在这个空间中它们彼此进入。

FWIW

{{的更新：

例如，这是一个相当典型的2系列示例，在同一chart的不同比例上绘制：

http://jsfiddle.net/jlbriggs/GYbRY/

它可以被清理和改进一点，但总的来说，无论你做什么，它都会有点混乱。

以下是在2个单独的图表上绘制的相同数据，其空间明显小于original：

http://jsfiddle.net/jlbriggs/m64Ys/

我觉得很难支持这样的论点，即第一个例子可以更容易地比较两个系列中的变化。

使用Highcharts绘制具有不同比例的时间序列

4 个答案: