Живой график с несколькими осями 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

http://api.highcharts.com/highcharts

Другие вопросы по тегам