Question

我正在尝试使用天气数据构建一个highcharts列表。最终，将有大约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>元素。如果您想拥有多个同步图表，但有一个具有多个系列，则必须将它们拆分。它的效率低于演示，但它应该为您提供所需的自定义。

我想它会像这样工作：

分别定义每个图表及其选项，将它们设置为自己的变量。
对于混合温度/露点图，请将两个数据集添加为特定图表选项中的单独系列。
确保每个图表的xAxis.events属性包含setExtremes: syncExtremes。

为每个图表定义选项并分配数据后，使用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>。

更新：在阅读原始海报的相关评论后，我有另外一个尝试可能更有效的想法。

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

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

如果您希望轴显示在右侧，只需添加“＆＃39;反对＆＃39;：true＆＃39;到您的轴定义。

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

Highcharts将图表与多个轴数据集同步

2 个答案: