javascript - Highcharts 同步图表与多轴数据集

Question

我正在尝试构建包含天气数据的高级图表列表。最终，将有大约 5 个同步图表都带有日期 xAxis。要注意的是，这 5 个图表中的每一个都至少有 2 个 yAxis。我正在尝试在 Highchart 同步图表示例中使用此方法来消除大量 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 api 同步图表示例:http://jsfiddle.net/bbw37zen/14/

我真正喜欢这个示例的地方在于数据集包含所有需要的信息，您只需运行此代码即可将其添加到图表中。

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>元素，一个接一个:

   $("<div class='CHART1'>").appendTo("#container").highcharts(chartOptions_CHART1);
   $("<div class='CHART2'>").appendTo("#container").highcharts(chartOptions_CHART2);
   // ... and so on
   

为了同步工作，每个图表都需要存在于 container 中。 <div> .

Update: After reading the associated comment from the original poster, I had another idea to try out that may be more efficient.

从理论上讲，数据集中的每个项目没有理由不包括您要绘制图表的两个项目。因此，在您的情况下，打包将与 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
}]

这样，您可以保持原始 fiddle 的简单性并满足您的要求。