HighCharts使用之一:基础配置

在需要使用图表的页面引入highcharts.js文件,但是在这之前需要先引入jq文件、版本必须高于1.6.4版本(在官网的demo页面可以看到,还支持其它很多js类库)

<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/highcharts.js"></script>
series对象,可以放置有多个属性对象、每个属性对象用{}包含并用“,”隔开可以设置多个属性:

series: [{对象1},{对象2},{...}]

每个对象均可设置多个属性。series最常用的属性有
属性名称 说明 类型
data 用于绘制图像的数据 Array
name 控制series的显示名称 String
type 图表的类型、类型有ploatOption String

其中data,name,type这些属性你可以通过ajax或者其它的方式传入。这样就可以很方便的动态统计。比如你要根据条件查询统计、这样就会非常方便。如果需要在一张图上有多种类型的统计也会出现一些小问题、比如上图的。饼状图将线形图的部分节点挡住了。
下面我们以Line图为例子、再介绍一些其它的方法的使用。

方法 描述 注明
remove() 用于移除指定位置的series,remove()例子  
hide() 用于隐藏指定的series,hide()例子  Show()也一样
select() 用于选中某个series,select()例子   需要设置series的showCheckbox属性 (True/Flase)
setData() 用于重设series的值,setData()例子 参数对象和data相同,最重要的
update() 用于更新series的各种属性,update()例子 参数为一个需要更新的对象

官方网站:http://www.highcharts.com/demo

猜你喜欢

转载自lovesave.iteye.com/blog/2364787