Highcharts:Y轴的对数图[100,99.9,99,90,0]

时间:2013-12-18 01:51:30

标签: highcharts

我正在尝试使用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]        
        }]
    });
});

但是,我有两个需要帮助的问题:

  1. 我无法在y轴上绘制100
  2. 值为100的原始数据无法在图表中显示
  3. 这是预期的图表: http://www.shareimage.ro/images/0j1o0bnccavkqds8icuy.jpg enter image description here

1 个答案:

答案 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;
            }
        }
    }