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轴刻度

回答

相关问题