如何在右侧Y轴上仅显示使用过的区域?
Highcharts.chart('container', {
chart: {
defaultSeriesType: 'line',
},
xAxis: {
gridLineWidth: 1,
minorGridLineWidth: 1,
type: 'datetime',
tickInterval: 3600 * 24 * 30 * 1000,
labels: {
rotation: -45,
formatter: function () {
var monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
var monthStr = monthNames[new Date(this.value).getMonth()];
return monthStr;
}
}
},
yAxis: [{
title: {
text: null
},
gridLineWidth: 1,
minorGridLineWidth: 1,
labels: {
formatter: function() {
return this.value * 100 + " %";
}
},
tickInterval: 0.2,
opposite: true,
min: 0
},{
title: {
text: null
},
gridLineWidth: 1,
minorGridLineWidth: 1,
min: 0
}
],
series: [{
name: "left",
data: [[1485896400000,8086.829999999999],[1488315600000,9575.62],[1490994000000,8446.84],[1493586000000,9959.93],[1496264400000,9246.06],[1498856400000,2346]],
yAxis: 1,
marker: {
symbol: 'circle'
}
},{
name: "right",
data: [[1485896400000,0.7920220246886492]
,[1488315600000,0.7950181534688361]
,[1490994000000,0.8068168576051594]
,[1493586000000,0.850108440799688]
,[1496264400000,0.8010823118430489]
,[1498856400000,0.8243148278285313]],
yAxis: 0,
colorIndex: 3,
marker: {
symbol: 'circle'
}
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
我需要缩放正确的yAxis,因为这些值很小(79% - 85%)。
答案 0 :(得分:1)
您目前为右侧Y轴设置了tickInterval: 0.2
和min: 0
。如果删除这两个设置,Y轴将缩放以适合数据。看到更新的小提琴:
https://jsfiddle.net/935dkrqm/2/
我还为您的工具提示添加了格式化程序,以便您可以正确地查看百分比系列的值。
tooltip: {
pointFormatter: function(){
return '<b>' + Highcharts.numberFormat(this.y * 100, 2) + '%</b>'
}
}