最近这一个多月,都围绕这个highchart转啊转,虽然东西不是很复杂。但是最开始使用的时候还是遇到少许困惑。所有写下来让刚接触这个插件的朋友能了解各大概。
在学习这个插件前一定要认真阅读highchart官网上的内容。
下面就来说一下我这个新手初初上手是遇到的一些困难。
1.关于json数据传到highchart表中
本人面临的是从后台传数据,一开始以为只能写点死数据什么的,但是把highchart的官网仔细阅读了一下发现在初始化一个options的时候,series:【】是这次形式,那么这样就好解决了,直接赋值。
series: [
{name:name} (name,柱状图、条形图上显示的名称)
]
options.series[0].data=dataTemp;
好的,就这样解决了。
如果有多条线,多个柱状图什么的就options.series[1].data=?、options.series[2].data=?ok了。
别忘了 series就变成了
series: [
{name:name1},
{name:name2},
{name:name3},
]
2.关于对x轴赋值
解决方法也是一样,只是一定要注意xAxis的属性:
xAxis: {
categories:[{
categories: []
}]
}
所以赋值的时候 如下
options.xAxis.categories=tempXTime;
可能就这两个属于稍微难点的
3.chart
chart: {
renderTo:'chartcontainer',
type: type,
}
renderTo:将图表画到你想要的容器中,type是指图表的类型,比较常用的是"line"和“column”,其中注意不要混淆“column”与“bar”。
4.credits(呵呵,可以消除highchart.com这个标志)
credits:{
enabled:false //则会隐藏下面的标示
}
将enabled赋值为false,就可以达到这个效果啦!
5.plotOptions
plotOptions: {
line: {
lineWidth: 1,
states: {
hover: {
lineWidth: 2.5
}
},
marker: {
enabled: false
}
},
column:{
pointPadding:pointPadding //bar 与 column 的宽度
}
}
lineWidth 指条形图线显示的宽度;hover下的hover: lineWidth是指将鼠标放在线上是显示的线的宽度
定义柱状图(column)的宽度范围(pointPadding)一般是(0~0.5)越接近0.5,柱状图月窄;
6.其他的好像就是对一些属性进行复制吧
只是个人认为一些有难点的地方,有不足或者错误的地方,还希望朋友们能够指出,可以多多交流。