Highcharts 同步图表与多轴数据集
Highcharts synchronized charts with multiple axes datasets
我正在尝试建立一个包含天气数据的图表列表。最终,将有大约 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 options/data - http://jsfiddle.net/kmuhw0zf/3/ ?
这是一个很好的问题!
该演示迭代几组数据,将每个图表添加到 container
<div>
元素。如果你想有多个同步图表,但有一个有多个系列,你将不得不把它们分开。它的效率不如演示,但它应该可以为您提供所需的自定义设置。
我想它会像这样工作:
- 单独定义每个图表及其选项,将它们设置为自己的变量。
- 对于混合 temperature/dewpoint 图表,将两个数据集作为单独的系列添加到该特定图表的选项中。
- 确保每个图表的
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>
.
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 的简单性并符合您的要求。
指定要使用的 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
}
]
});
如果您希望轴出现在右侧,只需在您的轴定义中添加“'opposite': true”即可。
我正在尝试建立一个包含天气数据的图表列表。最终,将有大约 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 options/data - http://jsfiddle.net/kmuhw0zf/3/ ?
这是一个很好的问题!
该演示迭代几组数据,将每个图表添加到 container
<div>
元素。如果你想有多个同步图表,但有一个有多个系列,你将不得不把它们分开。它的效率不如演示,但它应该可以为您提供所需的自定义设置。
我想它会像这样工作:
- 单独定义每个图表及其选项,将它们设置为自己的变量。
- 对于混合 temperature/dewpoint 图表,将两个数据集作为单独的系列添加到该特定图表的选项中。
- 确保每个图表的
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>
.
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 的简单性并符合您的要求。
指定要使用的 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
}
]
});
如果您希望轴出现在右侧,只需在您的轴定义中添加“'opposite': true”即可。