具有多轴数据集的高级图表同步图

Question

我正在尝试用天气数据建立一个高图表的列表。最终，将有大约5个同步图表，所有的日期xAxis。问题是，这5个图表中的每一个都至少有2个yAxis。我试图使用这个方法在高海图同步图表的例子，以消除过多的分解x和y轴设置。

数据格式：

  "datasets": [
      {
        "name": "Temperature", 
        "data": [[1464796500000, 70.34],[ 1464796800000, 70.52],[ 1464797100000, 70.52],[ 1464797400000, 70.7],[ 1464797700000, 70.88]], 
        "unit": "F", 
        "type": "area", 
        "valueDecimals": 1
      },
      {
        "name": "Dewpoint", 
        "data": [[ 1464796500000, 66.94],[ 1464796800000, 66.79],[ 1464797100000, 66.79],[ 1464797400000, 66.97],[ 1464797700000, 67.47]], 
        "unit": "F", 
        "type": "area", 
        "valueDecimals": 1
      },
      {
        "name": "Relative Humidity", 
        "data": [[ 1464796500000, 89],[ 1464796800000, 88],[ 1464797100000, 88],[ 1464797400000, 88],[ 1464797700000, 89]], 
        "unit": "%", 
        "type": "line", 
        "valueDecimals": 1
      }
  ]

我修改过的Highchart同步图表示例：http://jsfiddle.net/bbw37zen/14/

我真正喜欢这个例子的是，dataset拥有所需的所有信息，您只需运行以下代码就可以将其添加到图表中。

series: [{
    data: dataset.data,
    name: dataset.name,
    type: dataset.type,
    color: Highcharts.getOptions().colors[i],
    fillOpacity: 0.3,
    tooltip: {
        valueSuffix: ' ' + dataset.unit
    }
}]

那么，现在是主要的问题。在本例中，如何将温度和露点组合成一个图(两个y轴共享相同的xAxis日期)。我想试着保持数据的格式。是否可以使用此方法连接两个数据集？或者我需要使用这样的方法来分解yAxis选项/数据？？ http://jsfiddle.net/kmuhw0zf/3/ 。

Answer 1

这是个很棒的问题！

演示遍历几组数据，将每个图表添加到container <div>元素中。如果您想拥有多个同步图表，但有一个有多个系列，您将不得不将它们分开。它的效率不如演示，但它应该为您提供您需要的定制。

我想它会是这样的：

1. 分别定义每个图表及其选项，将它们设置为自己的变量。
2. 对于混合温度/露点图，将两个数据集作为单独的系列添加到该特定图表的选项中。
3. 确保每个图表的xAxis.events属性都包含setExtremes: syncExtremes。
4. 一旦为每个图表定义了选项并分配了数据，就使用jQuery appendTo()函数将它们一个接一个地添加到container <div>元素中： $("").appendTo("#container").highcharts(chartOptions_CHART1)；$("").appendTo("#container").highcharts(chartOptions_CHART2)；// .诸若此类

为了使同步化工作，每个图表都需要驻留在container <div>中。

更新:在阅读了来自原始海报的相关评论后，我有了另一个想法来尝试，这可能会更有效率。

理论上，您的数据集中的每个项都没有理由不能同时包含您想要绘制的两个项。因此，在您的示例中，将与JSON数组中的唯一名称和数据元素共享相同图表的项打包：

"datasets": [
    {
        "nameA": "Temperature", 
        "dataA": [[1464796500000, 70.34],[ 1464796800000, 70.52],[ 1464797100000, 70.52],[ 1464797400000, 70.7],[ 1464797700000, 70.88]], 
        "nameB": "Dewpoint", 
        "dataB": [[ 1464796500000, 66.94],[ 1464796800000, 66.79],[ 1464797100000, 66.79],[ 1464797400000, 66.97],[ 1464797700000, 67.47]], 
        "unit": "F", 
        "type": "area", 
        "valueDecimals": 1
    },
    ...
]

我在这里假设unit、type和valueDecimals是共同的。如果你想把它们区分开来，那就把它们复制一下。

以下是您在选项中的表现方式：

series: [{
    data: dataset.dataA,
    name: dataset.nameA,
    type: dataset.type,
    color: Highcharts.getOptions().colors[i],
    fillOpacity: 0.3,
    tooltip: {
        valueSuffix: ' ' + dataset.unit
    },
    yAxis: 0
}, {
    data: dataset.dataB,
    name: dataset.nameB,
    type: dataset.type,
    color: Highcharts.getOptions().colors[i],
    fillOpacity: 0.3,
    tooltip: {
        valueSuffix: ' ' + dataset.unit
    },
    yAxis: 1
}]

这样，您就可以保持原来的简单操作，以满足您的需求。

Answer 2

指定使用哪个y轴。每个图表可以包含多个y轴；您只需指定。

在javascript数据集调用中：

"datasets": [
  {
    "name": "Temperature", 
    "data": [[1464796500000, 70.34],[ 1464796800000, 70.52],[ 1464797100000, 70.52],[ 1464797400000, 70.7],[ 1464797700000, 70.88]], 
    "unit": "F", 
    "type": "area", 
    "valueDecimals": 1,
    **"yAxis": 0**
  }      
]

它们是基于0的，所以要这样做，或者给轴一个id。指定图表中的轴。

$('chart').highCharts({
yAxis :[ 
  {
  //define axis info
  },
  {
  //Axis 2 info
  }
]
});

如果您希望轴出现在右侧，只需在您的轴定义中添加“相反”：true。

http://api.highcharts.com/highcharts#yAxis