Highcharts图表控件是使用比较广泛的图表控件。本文将介绍如何配置Highcharts和动态生成Highcharts图表。可参考Highcharts官网：http://www.highcharts.com
1. 前言
Highcharts主要包含两个部分：Highcharts和Highstock。
Highcharts可以为网站和web应用程序提供直观、互动式的图表，目前支持：线、样条、面积、areaspline、柱形图、条形图、饼图和散点图类型。
Highstock可以建立股票或一般的时间轴图表，它包括先进的导航选项、预设的日期范围、日期选择器、滚动和平移等。
2. 安装
1.Highcharts沿用jquery,MooToo,Prototype等Javascript框架来处理基本的Javascript任务。所以，使用Highcharts之前，需要引用如下脚本文件。如果使用jQuery作为基本框架，那么需要在头部同时引用jQuery和Highcharts两个文件。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="/js/highcharts.js" type="text/javascript"></script>
Highcharts和Highstock内置了jQuery适配器，所以可以直接引用；但没有内置其他JavaScript框架的适配器，因此使用MooTools等其他JS框架时，需要单独引用适配器脚本文件。
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js" type="text/javascript"></script>
<script src="/js/adapters/mootools-adapter.js" type="text/javascript"></script>
<script src="/js/highcharts.js" type="text/javascript"></script>
3.国民体质统计结果展示
调用Highcharts代码对统计结果进行展示，js代码如下：
//显示统计图
function ShowGraph(data) {
var xname = [];
var seriesData = [];
var series5 = {};
series5["name"] = "5";
var tempdata = [];
var project = $('#Project').find("option:selected").text();
var index = 0;
for (var i in data) {
if (project == "全部") {
tempdata.push(parseFloat(data[i]["C5Per"]));
xname[index++] = data[i]["Project"];
} else {
if (project == data[i]["Project"]) {
tempdata.push(parseFloat(data[i]["C5Per"]));
xname[index++] = data[i]["Project"];
}
}
}
series5["data"] = tempdata;
seriesData.push(series5);
var series4 = {};
series4["name"] = "4";
tempdata = [];
for (var i in data) {
if (project == "全部") {
tempdata.push(parseFloat(data[i]["C4Per"]));
} else {
if (project == data[i]["Project"]) {
tempdata.push(parseFloat(data[i]["C4Per"]));
}
}
}
series4["data"] = tempdata;
seriesData.push(series4);
var series3 = {};
series3["name"] = "3";
tempdata = [];
for (var i in data) {
if (project == "全部") {
tempdata.push(parseFloat(data[i]["C3Per"]));
} else {
if (project == data[i]["Project"]) {
tempdata.push(parseFloat(data[i]["C3Per"]));
}
}
}
series3["data"] = tempdata;
seriesData.push(series3);
var series2 = {};
series2["name"] = "2";
tempdata = [];
for (var i in data) {
if (project == "全部") {
tempdata.push(parseFloat(data[i]["C2Per"]));
} else {
if (project == data[i]["Project"]) {
tempdata.push(parseFloat(data[i]["C2Per"]));
}
}
}
series2["data"] = tempdata;
seriesData.push(series2);
var series1 = {};
series1["name"] = "1";
tempdata = [];
for (var i in data) {
if (project == "全部") {
tempdata.push(parseFloat(data[i]["C1Per"]));
} else {
if (project == data[i]["Project"]) {
tempdata.push(parseFloat(data[i]["C1Per"]));
}
}
}
series1["data"] = tempdata;
seriesData.push(series1);
$("#container").empty();
$('#container').highcharts({
colors: ['#a9d86e', '#ffb500', '#5eaee3', '#847eb6', '#e06292'],
chart: {
type: 'column',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
viewDistance: 25,
depth: 40
}
},
title: {
text: '国民体质指标分析'
},
xAxis: {
categories: xname
},
yAxis: {
allowDecimals: false,
min: 0,
max: 100,
title: {
text: '比例'
}
},
tooltip: {
headerFormat: '<b>{point.key}</b><br>',
pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: 占{point.y}%'
},
plotOptions: {
column: {
stacking: 'normal',
depth: 40
}
},
series: seriesData
});
}
统计图：
