一、你必须知道的
1、首先,HighCharts是基于Jquery框架开发的,所以需要在页面引入Jquery,具体代码是:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
2、其次,需要引入HighCharts js文件
<script src="http://code.highcharts.com/highcharts.js"></script>
引入HighCharts js文件还可以是拷贝下载下来的Highcharts资源包中的js目录下的highcharts.js文件
3、如果你想使用导出功能,必须引入导出相关的js文件,该文件存在与/Highcharts-2.3.5/js/modules/目录下
<script src="http://code.highcharts.com/modules/exporting.js"></script>
引入下面的三个资源文件后,你就可以参考API文档进行开发了
二、HighCharts结构
通过阅读highCharts API文档,我们知道highCharts的基本结构是:
var chart = new Highcharts.Chart({
chart: {…}
colors: [{…}]
credits: {…}
exporting: {…}
global: {…}
labels: {…}
lang: {…}
legend: {…}
loading: {…}
navigation: {…}
pane: {…}
plotOptions: {…}
series: [{…}]
subtitle: {…}
title: {…}
tooltip: {…}
xAxis: {…}
yAxis: {…}
});
其中只有几个是必须配置的属性,其他无特殊要求默认即可。所以,HighCharts开发,只需要了解每个属性的含义,并有选择的配置需要的效果既可。