- HighCharts简介
- HighCharts的使用
- 下载插件
- 具体应用
- FIRSTLY
- SECONDLY
- THIRDLY
- FINALLY
HighCharts简介
最近做的项目需要用到数据分析，图表显示，之前做项目的时候用到过highcharts，不过也只是简单的会用而已，然后再网上查了查highcharts的优点：
Highcharts使用的一些优点的介绍。
一、首先、使用Highcharts能快速、简单的做出各种诸如柱状图、饼状图、曲线图等多种形式的统计图或者走势图。使用者只需要提供对应的数据、以及简单的Highcharts的配置即可。使用简单。
二、跨语言跨平台支持多种浏览器。Highcharts是基于js制作出来的。是一个js类库。无论你使用什么后端语言，都可以很方便的使用Highcharts来做图表或者统计。
三、使用门槛极低、稍微看一下API都可以做出各种符合要求的统计图表等。
数据灵活。支持xml 和json。
Highcharts是一款开源图表库，开源但不完全免费。Highcharts针对个人用户及非商业用途免费，商业用途需要购买授权。
HighCharts的使用
下载插件
若要用HighCharts的话，得先引用它的插件，插件不大，核心文件只有一个highcharts.js文件，可以去HighCharts官网上去下载：
如果需要导出图表，则需要exporting.js文件
如果需要一些特殊的图形呈现，则还需要下载highcharts-more.js
具体应用
FIRSTLY
首先，下载完成之后，就把js文件引用到项目中
<!--highcharts核心文件-->
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<!--导出需要引用的文件-->
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script>SECONDLY
在界面中定义<div>盒子:
<div class="row">
<div id="pieChart" style="float: left; height: 550px;margin-left:20px;"></div>
<div id="columnChart" style="float: left; height: 550px; margin-left:20px;"></div>
</div>THIRDLY
在js中定义如何接受数据，和如何显示表格的样式，highcharts的这些样式都是可以通过js控制的，因为highcharts本身就是用JavaScript编写的一个图表库。在这里我只是用饼形图，和柱状图做例子。
//图标分析公用部分--同时显示两个图表（饼型和柱状）
function chartAnalyze(Result,title){
/* alert(data); */
var strJson = Result;
var data = [];
for ( var i in strJson) {
var serie = new Array(strJson[i].name, strJson[i].count);
data.push(serie);
}
PieChart(data,title);
ColumnChart(data,title);
}
//图标分析公用部分--只显示一个图表（柱状）
function scoreAnalyze(result,title){
var strJson = Result;
var data = [];
for ( var i in strJson) {
var serie = new Array(strJson[i].name, strJson[i].count);
data.push(serie);
}
ColumnChart(data,title);
}
//饼图
function PieChart(series,title) {
$('#pieChart').highcharts({
chart : {
plotBackgroundColor : null,
plotBorderWidth : null,
plotShadow : false
},
credits : {
enabled : false,
},
title : {
text : title
},
tooltip : {
pointFormat : '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions : {
pie : {
allowPointSelect : true,
cursor : 'pointer',
dataLabels : {
enabled : true,
format : '<b>{point.name}</b>: {point.percentage:.1f} %'
},
showInLegend : true
}
},
series : [ {
type : 'pie',
data : series
} ]
});
}
//柱状图
function ColumnChart(series,title) {
$('#columnChart').highcharts({
chart: {
type: 'column',
},
credits: {
enabled: false,
},
title: {
text: title
},
xAxis: {
categories: [
],
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: '总数'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '数量',
},
series: [{
name: 'Population',
data: series,
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: 4,
y: 10,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 3px black'
}
}
}]
});
}FINALLY
js接受从后台传到界面上的json对象，然后绑定到图表上进行显示。秀一下最终的结果。
现在对于highcharts的使用也只是处于会用的阶段，具体每一种图表在哪一种场景下使用还是不确定的，在后面的博客中会进行深入的研究！期待！