我正在尝试使用Highcharts来生成我们网站的可用性信息。 Y轴是百分比的可用性,预期标签是:
[100, 99.9, 99, 90, 0]
代码: http://jsfiddle.net/2E9vF/1/
$(function () {
$('#container').highcharts({
chart: {
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: "AVAILABILITY %"
},
labels: {
formatter: function() {
return 100-this.value;
}
},
type: 'logarithmic',
reversed:true,
min:0.01,
plotLines: [{
color: '#CCCCCC',
width: 2,
value: 0.1,
dashStyle: 'ShortDot'
},{
color: 'red',
width: 2,
value: 1,
dashStyle: 'ShortDot'
},{
color: '#CCCCCCC',
width: 2,
value: 10,
dashStyle: 'ShortDot'
}],
},
tooltip: {
formatter: function() {
return 'x:'+ this.x +'<br>'+
'y:'+ (100-this.y);
}
},
series: [{
// real data:
// [90, 98, 99.7, 100, 100, 99.9, 99.7, 90, 91, 98, 96, 97.3]
data: [10, 2, 0.3, 0, 0, 0.1, 0.3, 10, 9, 2, 4, 2.7]
}]
});
});
但是,我有两个需要帮助的问题:
这是预期的图表: http://www.shareimage.ro/images/0j1o0bnccavkqds8icuy.jpg
答案 0 :(得分:1)
一般情况下,不支持负数和从零开始,但您可以解决此问题:http://jsfiddle.net/2E9vF/2/
分步骤:
假设值0将表示为另一个,例如0.001(或更低)
将yAxis的分钟设置为该值
相应地更新工具提示和yAxis.labels的格式化程序:
tooltip: {
formatter: function() {
if(this.y === 0.001) {
return 'x:'+ this.x +'<br>'+ 'y:100';
} else {
return 'x:'+ this.x +'<br>'+ 'y:'+ (100-this.y);
}
}
},
并且:
yAxis: {
labels: {
formatter: function() {
if(this.isFirst) {
return 100;
}
return 100-this.value;
}
}
}