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

Posted 2023-03-14

【中文标题】在高图中具有多个 y 轴的实时图

【英文标题】：Live plot with multiple y axis in highcharts

【发布时间】：2014-03-21 10:32:56

【问题描述】：

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

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

首先，它不显示每个 Y 轴上的比例值，只是显示标题。

第二件事，

我使用了linkedTo——>它是从主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

我使用了 min 和 max 以及刻度间隔，但是当值超出时它会自动调整大小。使用 setextreme 但它是解决方法。

提前致谢

$(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" 
    ]
);
  

【参考方案1】：

不显示比例，因为任何系列都与此轴无关。换句话说，要具有规模，您需要通过 yAxis 链接 serie

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

【讨论】：

你能修改我上面的代码吗？我没有得到你的答案。就我而言，我是实时获取数据的。所以我无法将任何系列数据与 y 轴相关联。我上面的系列不同。我没有静态数据。

【参考方案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" 
    ]