HighCharts:水平条形图的对数标度

时间:2012-01-25 10:21:52

标签: javascript scaling highcharts horizontal-scaling

我正与HighCharts合作制作条形图。我的值可以从最小0到最高100k(示例)。因此,图形的一条可以非常小而另一条可以非常长。 HighCharts引入了“对数缩放”功能。可以看到 HERE

的示例

我的js代码是用这个jsfiddle文件编写的。我想以对数方式显示我的水平轴(x轴)。我已插入键类型,如示例所示,但脚本进入无限循环,必须停止。

执行中的缺陷是什么,或者HighCharts的对数缩放仍然不成熟?

P.S jsfiddle中的注释行导致问题

2 个答案:

答案 0 :(得分:7)

由于“官方”方法仍然存在问题,因此您可以通过使用基本10日志操作输入数据并屏蔽输出数据,将输出数据提高10到输出值,从而更加手动地实现日志比例。请在下面的http://jsfiddle.net/7J6sc/代码中查看此操作。

function log10(n) {
 return Math.log(n)/Math.log(10);   
}

chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'bar',
        marginRight: 200,
        marginLeft: 10,
    },
    title: {
        text: 'Negative'
    },
    xAxis: {
        categories: [''],
        title: {
            text: null
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: '',
            align: 'high',
        },
        labels: {
            formatter: function() {
             return Math.round(Math.pow(10,this.value));
            }
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -50,
        y: 100,
        floating: true,
        borderWidth: 1,
        shadow: true
    },
    tooltip: {
        formatter: function() {
            return '' + this.series.name + ': ' + Math.round(Math.pow(10,this.y)) + ' millions';
        }
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true,
                formatter: function() {
                   return Math.round(Math.pow(10,this.y)); 
                }
            }
        }
    },
    credits: {
        enabled: false
    },
    series: [{
        "data": [log10(4396)],
        "name": "A"},
    {
        "data": [log10(4940)],
        "name": "B"},
    {
        "data": [log10(4440)],
        "name": "C"},
    {
        "data": [log10(2700)],
        "name": "D"},
    {
        "data": [log10(2400)],
        "name": "E"},
    {
        "data": [log10(6000)],
        "name": "F"},
    {
        "data": [log10(3000)],
        "name": "G"},
    {
        "data": [log10(15000)],
        "name": "E"}],

});

答案 1 :(得分:2)

根据Official Documentation,它仍然是实验性的,所以可能就是这样:

“轴的类型。可以是”线性“或”日期时间“之一。在日期时间轴中,数字以毫秒为单位,刻度标记放在适当的值上,如完整小时或天。

从2.1.6开始,添加“对数”作为实验性功能,但尚未完全实现。默认为“线性”。

尝试:“线性”,“日期时间”,定期间隔,“日期时间”,不规则间隔,实验性“对数”轴。“