Highcharts

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

文章目录
  1. 配置文件介绍
  2. 前端页面相关调用
    1. jquery 方式
  3. highchart 原始render方式
  4. 结合服务端返回的数据
    1. 最后来张效果图

使用 highcharts 已经有好几年的时间了，用过很多图表插件！例如 funsionchart、dhtmlxChart、jqPlot、JS Charts、Open Flash Chart、Flot，在到国产最近比较好的 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() {});

  • 最后来张效果图

效果图