[HighCharts] 关于对几组不同数量级的数据进行分类比较处理办法

来源：互联网发布：狼雨seo网站排名编辑：程序博客网时间：2024/05/22 05:28

转载链接：
highCharts处理Y不同数量级

一、问题描述
在同一个坐标系中，由于高中低的数量级差异悬殊，会导致小数据柱形图趋近于0，直接取对数又会导致对比不明显。例如要比较的数据如下：

[JavaScript] 纯文本查看复制代码

?
01
02
03
04
05
06
07
08
09
10
series: [{
    name:'Jane',
    data: [1,0,4]
}, {
    name:'John',
    data: [5,7,3]
}, {
    name:'Michael',
    data: [1,1000,500]
}],

06.jpg (35.09 KB, 下载次数: 0)

下载附件

2013-11-23 15:43 上传

二、解决办法：
1、将数据做成百分比
同样的上述数据，做成百分比的数据为：

[JavaFX] 纯文本查看复制代码

?
01
02
03
04
05
06
07
08
09
10
series: [{
    name:'Jane',
    data: [1/7,0/1007,4/507]
}, {
    name:'John',
    data: [5/7,7/1007,3/507]
}, {
    name:'Michael',
    data: [1/7,1000/1007,500/507]
}],

当然，如果不想让Tooltip中显示百分数，可以进行相应的格式化处理。

2、做成多Y轴的对比图
实现代码如下：

[JavaScript] 纯文本查看复制代码

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
$(function() {
    $('#container').highcharts({
        chart: {
            type:'bar'
        },
        title: {
            text:'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples','Bananas','Oranges']
        },
        yAxis: [{
            title: {
                text:'Fruit eaten'
            }
        },{
            title: {
                text:'Fruit eaten'
            } ,
            opposite:true
       }],
        series: [{
            name:'Jane',
            data: [1,0,4],
            yAxis:1
        }, {
            name:'John',
            data: [5,7,3],
            yAxis:1
        }, {
            name:'Michael',
            data: [1,1000,500],
            yAxis:0
        }],
    });
});

0 0