[英]Stacked y-Axis on Highcharts, how to make it one?
I successfully created a charts with two y axis using Highcharts JS Library.我使用 Highcharts JS 库成功地创建了一个带有两个 y 轴的图表。
However you can see the y-Axis is stacked (Fahrenheit and temperature), is it possible to merge it to one?但是您可以看到 y 轴是堆叠的(华氏温度和温度),是否可以将其合并为一个?
Here is my code.这是我的代码。
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'line'
},
time: {
timezone: 'Australia/Brisbane'
},
title: {
text: 'Temperature Graph'
},
xAxis: {
type: 'datetime',
categories: <?php echo json_encode($tgl, JSON_NUMERIC_CHECK); ?>,
title: {
text: 'Dates'
},
},
yAxis: [{
title: {
text: 'temperature'
}
}, {
title: {
text: 'Fahrenheit'
}
}],
series: [{
name: 'Celcius',
data: <?php echo json_encode($suhu, JSON_NUMERIC_CHECK);?>
}, {
name: 'Fahrenheit',
data: <?php echo json_encode($lembap, JSON_NUMERIC_CHECK); ?>,
yAxis: 1
}]
});
});
</script>
You can render this chart with only one yAxis and use the labels.formatter
callback to format the displaying labels and show also the Fahrenheit values.您可以仅使用一个 yAxis 呈现此图表,并使用
labels.formatter
回调来格式化显示标签并显示华氏温度值。
Demo: https://jsfiddle.net/BlackLabel/L8e9g1n3/演示: https://jsfiddle.net/BlackLabel/L8e9g1n3/
labels: {
formatter() {
let fahrenheitValue = 1.8 * this.value + 32;
return this.value + " / " + fahrenheitValue
}
}
API: https://api.highcharts.com/highcharts/yAxis.labels.formatter API: https://api.highcharts.com/highcharts/yAxis.labels.formatter
If you need you can customize the tooltip in the same way by using the tooltip.formatter
.如果需要,您可以使用
tooltip.formatter
以相同的方式自定义工具提示。
API: https://api.highcharts.com/highcharts/tooltip.formatter API: https://api.highcharts.com/highcharts/tooltip.formatter
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.