Highchat如何使用
2012-05-04 14:46
225 查看
一:配置
1.引入JQuery.js和Highchart.js文件
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="/js/highcharts.js" type="text/javascript"></script>
2.在script标签或者单独的js文件中初始化表结构,一般的表用new Highchart.Chart(),股市表用new Highchart.StockChart().
注意其中的renderTo,其键值为对应呈现图表结构的id。
3,加入对应第2步中的id的div标签,并可设置相应的表结构的宽度与高度。
4.可选项,运用highchart自带的4个主题去设置选项。
二:设置选项
直接用Javascript对象结构进行设置或者用第一步中的4进行设置
三:理解轴
highchart都会拥有一个具备类别的轴,该类别可以自己定义,如果使用线性或者时间日期轴时,highchart有自带的调节功能,并且可以通过xAxis.labels.formatter进行格式化轴标签,如果使用其他的类别轴时,当类别间过度稠密时,可以通过旋转轴标签或xAxis.labels.staggerLines进行调整
四:预处理选项
通过编程来改变选项,用javascript object的形式比较好,如:
当定义了object对象后,还可以对其进行扩展,比如option.series.push({ name:'aaaaa' , data: [1,2,3]}),option.renderTo,option['renderTo']等等
注:还可以通过外部csv文件或者xml文件进行设置
五:
1.引入JQuery.js和Highchart.js文件
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="/js/highcharts.js" type="text/javascript"></script>
2.在script标签或者单独的js文件中初始化表结构,一般的表用new Highchart.Chart(),股市表用new Highchart.StockChart().
注意其中的renderTo,其键值为对应呈现图表结构的id。
3,加入对应第2步中的id的div标签,并可设置相应的表结构的宽度与高度。
4.可选项,运用highchart自带的4个主题去设置选项。
二:设置选项
直接用Javascript对象结构进行设置或者用第一步中的4进行设置
三:理解轴
highchart都会拥有一个具备类别的轴,该类别可以自己定义,如果使用线性或者时间日期轴时,highchart有自带的调节功能,并且可以通过xAxis.labels.formatter进行格式化轴标签,如果使用其他的类别轴时,当类别间过度稠密时,可以通过旋转轴标签或xAxis.labels.staggerLines进行调整
四:预处理选项
通过编程来改变选项,用javascript object的形式比较好,如:
// Good code: var options = { chart: { renderTo: 'container', defaultSeriesType: 'bar' }, series: [{ name: 'Jane', data: [1, 0, 4] }] };
当定义了object对象后,还可以对其进行扩展,比如option.series.push({ name:'aaaaa' , data: [1,2,3]}),option.renderTo,option['renderTo']等等
注:还可以通过外部csv文件或者xml文件进行设置
五:
相关文章推荐
- 如何使用MSN Chat Monitor & Sniffer?
- 如何使用starwind来做高可用(High Availability)
- linux的highmem高端内存是如何被使用的
- 如何使用bootstrap
- 如何查印表機可不可以使用伺服器?
- 如何使用ArcGIS9.2中的动态显示(Dynamic Display)技术(五)
- cmd中的copy命令如何使用
- 如何正确使用javascript 来进行我们的程序开发
- 如何使用nfs协议 使开发板共享ubuntu虚拟机目录
- 如何使用Android中hide的类和方法进行开发?
- Django 1.6 最佳实践: 如何正确的使用和设置Database和Model
- 如何使用Android Studio阅读开源代码
- Node.js如何使用Diffie-Hellman密钥交换算法详解
- 【教程】如何知道C/C++的标准库中有多少个函数?(说的不是常用的函数,也不是在本地磁盘中查文件头哈,并且还要有每一种函数的使用详解)
- 如何使用find查找deque中保存的结构体对象
- 如何使用CodeSmith(转载)
- 如何使用Box2D和Cocos2D制作一款像Fruit Ninja一样的游戏-第2部分
- 使用HAproxy如何实现web站点的动静分离
- WeX5界面模块化的使用—如何显示声明依赖
- 【数据库】mac下如何安装和使用mysql