highchart通用配置文件及使用说明

文章目录

使用 highcharts 已经有好几年的时间了,用过很多图表插件!例如 funsionchartdhtmlxChartjqPlotJS ChartsOpen Flash ChartFlot,在到国产最近比较好的 echarts ,这里面有基于javascript的,也有基于flash的,但最喜欢的还是 highcharts,这些图表插件基本的图表功能大部分都能满足,但区别在于图表的功能可扩展性及浏览器兼容性上,highcharts 有明显的优势。

###配置文件介绍

  • 下面步入正题,给大家分享一个 highcharts 全局配置文件,其实也没什么,无非就是将通用api里的参数放在了一个方法里,这样初始化图表就不用每次都去写一大串配置,而是用到什么参数就写什么参数,具体请看下面这段javascript代码
1
2
3
4
5
6
7
8
9
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
Highcharts.setOptions({
lang:{
resetZoom:' 还 原 ',
resetZoomTitle:'还原比例1:1'
}
});
// 核心调用方法
function GetChartOptions() {
var options = {
chart : {
renderTo : '',
// 是否开启水平缩放
zoomType:null,
options3d : {
enabled : false,
alpha : 5,
beta : 10,
depth : 45,
viewDistance : 25
}
},
loading : {
hideDuration : 1000,
showDuration : 1000
},
yAxis : {
title : {
text : ""
},
allowDecimals : false,
min : 0,
tickPixelInterval : 72
},
legend:{
enabled:true
},
xAxis : {
type : 'linear',
categories:null,
minRange:null,
tickInterval:null,
labels : {
rotation : 0,
style : {
color : '#000000',
fontSize : '12px'
}
}
},
navigation : {
buttonOptions : {
enabled : true
}
},
credits : {
// 是否启用右下角水印
enabled : false
},
lang : {
noData : "暂无数据",
contextButtonTitle:"导出选项"
},
noData : {
style : {
fontWeight : 'bold',
fontSize : '15px',
color : '#303030'
}
},
plotOptions : {
bar : {
dataLabels : {
enabled : true
}
},
column : {
cursor : 'pointer',
depth : 25
},
pie : {
allowPointSelect : true,
cursor : 'pointer',
dataLabels : {
enabled : true,
color : '#000000',
connectorColor : '#000000',
format : '<b>{point.name}</b>: {point.percentage:.1f} %'
},
showInLegend : true,
events: {
click:null
}
},
line : {
dataLabels : {
enabled : false
},
cursor : 'pointer'
},
series:{
pointStart : 0,
pointInterval : 1,// 24 * 3600 * 1000
point: {
events: {
click: null
}
}
}
},
tooltip : {
xDateFormat : '%Y-%m-%d'
},
subtitle : {
text : ""
},
title : {
text : "",
style : {
color : '#000000',
fontSize : '14px',
fontFamily : '微软雅黑'
}
},
series : []
};
return options;
}
  • 建立一个自己的js配置文件,例如 ChartOption.js,将其引用紧跟随highchart.js 文件。

###前端页面相关调用

  • 那么js引用后,前端如何使用呢?highchart到目前为止已经扩展了 jquery方式 去初始化图表,而早期highchart 使用的自己独立的 render方式 初始化
    ####jquery 方式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    $(function () {
    //根据GetChartOptions方法获取配置对象,然后为其赋值
    var options =GetChartOptions();
    options.title.text="我是折线图";
    options.chart.type = "line";
    options.xAxis.categories=['Jan', 'Feb', 'Mar'];
    options.series= [{
    name: '类型一',
    data: [7.0, 6.9, 9.5]
    }, {
    name: '类型二',
    data: [3.9, 4.2, 5.7]
    }]
    $('#container').highcharts(options);
    });

###highchart 原始render方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function initChart()
{
//定义chart对象
var chart=null;
//根据GetChartOptions方法获取配置对象,然后为其赋值
var options =GetChartOptions();
options.title.text="我是折线图";
options.chart.type = "line";
options.xAxis.categories=['Jan', 'Feb', 'Mar'];
options.series= [{
name: '类型一',
data: [7.0, 6.9, 9.5]
}, {
name: '类型二',
data: [3.9, 4.2, 5.7]
}]
//初始化对象
chart = new Highcharts.Chart(option);
}
initChart();

###结合服务端返回的数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//这个方法是动态处理ajax返回后的数据渲染图表
$http.get(url, {params : p}).success(function(data) {
var chart = null;
var option = GetChartOptions();
option.chart.height = 200;
option.chart.options3d.enabled = false;
option.legend.enabled = false;
option.title.style.color = '#57889c';
option.title.text = "重要微博";
var category = [];
var obj = {
name : "转发回复总数",
data : []
}
if (!jQuery.isEmptyObject(data) && data.length > 0) {
$.each(data, function(i, n) {
obj.data.push( {name:n.NewsName,y:n.Number, url:n.weiboUrl});
});
option.xAxis.categories = category;
}
option.plotOptions.series.point.events.click=function(event){
window.open(this.options.url);
}
option.chart.renderTo = "divImportantNews";
option.series.push(obj);
option.plotOptions.pie.dataLabels.enabled = false;
option.chart.type = "pie";
chart = new Highcharts.Chart(option);
}).error(function() {});


  • ####最后来张效果图

效果图