我有线系列和条形图的通用数据集。换句话说,数据集包括线系列数据集和条形图数据集。现在我想在单独的x轴和单独的x轴上的条形图上绘制线系列图。并希望从同一帧控制它们。就像两个工具提示都应该出现在同一个弹出窗口中一样,我可以显示和隐藏它们。附上我的截图,目前他们共享相同的x轴。我想把它们分开。这是我的一段代码。
for(j=0; j<timelinejson.length; j++){
seriesOptions[j] = {
//name: selectedMarkers[i],
name: timelinejson[j].marker_desc,
data: mData,
marker : {
enabled : true,
radius : 3
},
type : 'spline',
tooltip : {
valueDecimals : 2
}
};
}
seriesOptions[10] = {
name: 'Speed',
data: [[1372636800000, 0.16], [1375315200000, 0.36], [1377993600000, 0.4], [1380585600000, 0.68], [1383264000000, 0.6], [1385856000000, 0.64], [1388534400000, 0.68], [1391212800000, 0.69], [1393632000000, 0.71], [1396310400000, 0.73], [1398902400000, 0.74], [1401580800000, 0.75], [1404172800000, 0.76], [1406851200000, 0.17], [1409529600000, 0.67], [1412121600000, 0.18], [1414800000000, 0.58], [1417392000000, 0.28], [1420070400000, 0.58], [1422748800000, 0.49], [1425168000000, 0.39], [1427846400000, 0.29], [1430438400000, 0.59], [1433116800000, 0.19]],
type: 'column',
valueDecimals: 1
};
drawTrend(seriesOptions,temp)
function drawTrend(marker_array_main,temp) {
$('#trendChart'+temp).highcharts('StockChart', {
chart: {
height: 400
//width: 500
},
rangeSelector: {
selected: 4
},
yAxis: {
/*labels: {
formatter: function () {
return (this.value > 0 ? ' + ' : '') + this.value + '%';
}
},*/
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
legend: {
enabled: true,
align: 'right',
verticalAlign: 'top',
layout: 'vertical',
x: 0,
y: 100
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> <br/>',
valueDecimals: 2
},
series: marker_array_main
});
}
答案 0 :(得分:0)
我认为您可以在图表中使用多个yAxis。您可以根据需要添加任意数量的yAx,并且可以使用Series对象中的yAxis:x参数将系列与此轴连接。
x value是yAxis数组中特定轴的索引。
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'OHLC'
},
height: '60%',
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Volume'
},
top: '65%',
height: '35%',
offset: 0,
lineWidth: 2
}],
series: [{
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
在这里,您可以从Highcharts演示中找到此类图表的简单示例: