Живой график с несколькими осями Y в старших графиках
Я создал прямую линейную диаграмму с несколькими осями Y. По щелчку легенды, создав ось Y.
вот демо http://jsfiddle.net/ashwinp/J7LmP/3/
Во-первых, он не показывает значения шкалы на каждой оси Y, он показывает только заголовок.
Второе,
Я использовал connectedTo -> это наследуется от первичной оси Y.
вот демо http://jsfiddle.net/ashwinp/J7LmP/4/
Здесь я хочу, чтобы каждая ось Y имела собственное масштабирование. он не должен наследовать масштабирование от первичной оси y.
Ось Y должна масштабироваться в зависимости от значения собственной серии.
Например: значения Series1 находятся в диапазоне от 1 до 100, иногда они могут превышать 100 и в это время также должны автоматически масштабироваться. Серия 2: от 200 до 500 и серия 3: от 600 до 1000
в этом случае: Yaxis1 Min будет 1, а max будет 100 и Y axis2: 200- 500 y axis3: 600-1000
Я использовал минимальные и максимальные интервалы и интервал между тиками, но он автоматически изменяет размеры, когда значения выходят за пределы. Используется setextrem, но это обходное решение.
заранее спасибо
$(function () {
$(document).ready(function () {
RawDataChartWithMultiYAxis();
});
});
function addAxes(name, visiblity, index) {
var chart = $('#container').highcharts();
if (visiblity == "hidden") {
chart.addAxis({
id: name,
title: {
text: name
},
lineWidth: 2,
lineColor: '#08F',
labels: {
format: '{value} ' + chart.series[index].tooltipOptions.valueSuffix,
style: {
color: '#4572A7'
}
},
opposite: false,
linkedTo:0
});
} else {
chart.get(name).remove();
}
}
function RawDataChartWithMultiYAxis() {
var a = 0;
new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
alignTicks: true,
animation: Highcharts.svg, // don't animate in old IE
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
var series1 = this.series[1];
var series2 = this.series[2];
setInterval(function () {
var shift = series.data.length > 10;
var x = a++, // current time
y = parseFloat(Math.random());
y1 = parseFloat(Math.random() * 100);
y2 = parseFloat(Math.random() * 1000);
series.addPoint([x, y], true, shift);
series1.addPoint([x, y1], true, shift);
series2.addPoint([x, y2], true, shift);
}, 1000);
}
}
}, plotOptions: {
series: {
animation: true,
events: {
click: function () {
},
legendItemClick: function (event) {
var visibility = this.visible ? 'visible' : 'hidden';
addAxes(this.name, visibility, this.index);
}
}
}
},
tooltip: {
shared: true
},
yAxis: {
title: {
text: 'X1'
},
lineWidth: 2,
lineColor: '#F33'
},
legend: {
enabled: true
},
series: [{
name: 'X1',
data: [],
tooltip: { valueSuffix: " QSU" }
}, {
name: 'X2',
data: [],
visible: false,
tooltip: { valueSuffix: " mS/cm" }
}, {
name: 'X3',
data: [],
visible: false,
tooltip: { valueSuffix: " Celcius" }
}]
});
}
2 ответа
Установите YAXIS в вашей серии.
series: [{
name: 'X1',
data: [],
tooltip: { valueSuffix: " QSU" }
}, {
name: 'X2',
data: [],
yAxis: 1,
visible: false,
tooltip: { valueSuffix: " mS/cm" }
}, {
name: 'X3',
data: [],
yAxis: 2,
visible: false,
tooltip: { valueSuffix: " Celcius" }
}]
Масштаб не отображается, потому что любая серия не связана с этой осью. Другими словами, чтобы иметь масштаб, вам нужно связать серию с помощью yAxis