Highcharts |製作多個y軸刻度

我試圖讓這個圖表有多個Y軸，所有這些都有不同的值和滴答間隔。像信號強度的範圍爲0％-100％，溫度0F-100F和主電源爲0V到25V，但似乎無法弄清楚。這裏是我的jFiddle： http://jsfiddle.net/0k5k8ygz/Highcharts |製作多個y軸刻度

代碼：

function createChart() { 

Highcharts.stockChart('container', { 

    rangeSelector: { 
     selected: 4 
    }, 

    yAxis: [{ // Primary yAxis 
    labels: { 
     format: '{value}°F', 
     style: { 
      color: Highcharts.getOptions().colors[2] 
     } 
    }, 
    title: { 
     text: 'Temperature', 
     style: { 
      color: Highcharts.getOptions().colors[2] 
     } 
    }, 
    opposite: true 

}, { // Secondary yAxis 
    gridLineWidth: 0, 
    title: { 
     text: 'Main Power', 
     style: { 
      color: Highcharts.getOptions().colors[0] 
     } 
    }, 
    labels: { 
     format: '{value} volts', 
     style: { 
      color: Highcharts.getOptions().colors[0] 
     } 
    } 

}, { // Tertiary yAxis 
    gridLineWidth: 0, 
    title: { 
     text: 'Signal Strength', 
     style: { 
      color: Highcharts.getOptions().colors[1] 
     } 
    }, 
    labels: { 
     format: '{value} %', 
     style: { 
      color: Highcharts.getOptions().colors[1] 
     } 
    }, 
    opposite: true 
}], 




    plotOptions: { 
     series: { 
      compare: 'percent', 
      showInNavigator: true 
     } 
    }, 

    tooltip: { 
     pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>', 
     valueDecimals: 2, 
     split: true 
    }, 

    series: seriesOptions 
}); 

$.each(names, function (i, name) { 

$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=' + name.toLowerCase() + '-c.json&callback=?', function (data) { 

    seriesOptions[i] = { 
     name: name, 
     data: data 
    }; 

    // As we're loading the data asynchronously, we don't know what order it will arrive. So 
    // we keep a counter and create the chart when all the data is loaded. 
    seriesCounter += 1; 

    if (seriesCounter === names.length) { 
     createChart(); 
    } 
}); 
});

來源

2017-05-30 J. Doe43

那麼什麼是實際問題（具體）？ – jlbriggs

對不起，我不知道如何將數值添加到所有3個Y軸的比例。在圖表的右側，主電源和信號強度均爲空白。我將如何去讓他們有數值？主要功率範圍爲0至24，信號強度範圍爲0％至100％ –

如果一些數據添加到每個Y軸的，他們將得到自動刻度線。您使用series.yAxis指數數據分配到特定的y軸：

seriesOptions[i] = { 
    name: name, 
    data: data, 
    yAxis: i, 
};

如果你也想指定y軸的有效範圍內，就可以在各個軸設置min和max：

... 
labels: { 
    format: '{value} volts', 
}, 
min: 0, 
max: 25, 
...

http://jsfiddle.net/0k5k8ygz/5/

來源

2017-05-30 20:50:24 Sphinxxx

謝謝Sphinxxx！這回答了我的問題！ –

Highcharts |製作多個y軸刻度

回答

相關問題