Question

我创建了多个y轴的实时折线图。单击图例，创建Y轴。

这是演示http://jsfiddle.net/ashwinp/J7LmP/3/

首先，它没有在每个Y轴上显示比例值，只是它只显示标题。

第二件事，

我使用了linkedTo - ＆gt;它继承自主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轴为2：200-500 y轴3：600-1000

我使用了min和max以及tick间隔，但是当值超出时它会自动重新调整大小。使用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" }
    }]
});
  }

Answer 1

不显示比例，因为任何系列与此轴无关。换句话说，要获得比例，您需要通过yAxis链接系列

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

Answer 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" }
    }]

在高位图中具有多个y轴的实时图

2 个答案: