Highcharts使用时遇到的问题及解决方案
来源:互联网 发布:软件开发项目经费预算 编辑:程序博客网 时间:2024/06/05 05:10
Highcharts图表控件功能强大,对细节处理得很细致,是目前使用最为广泛的图表控件。本文总结了作者在使用Highcharts时遇到的问题及解决方案。
1. 图表颜色设置
图表的边框色,背景色及点、线的颜色都是可以设置的,其中边框色(borderColor)、背景色(backgroundColor)在chart中设置:
chart: {
backgroundColor: 'pink',// 背景色
borderColor: 'red',// 边框色
borderWidth: 2,
type: 'line'
},
点和线的颜色在series中设置:
series: [{
color:"green",//点线的颜色,如果lineColor,fillColor没定义,均使用这个颜色
lineColor:'yellow',//线的颜色
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
marker: {
fillColor: 'blue',//点的填充色
lineWidth: 2,
lineColor: 'black' //点的边框色
}
}]
看下效果:
2. 图表宽高设置
宽,高均在chart中设置,如果不设置,则自适应显示
chart: {
type: 'line',
width: 600,//宽
height:300//高
}
3. 点的形状
如下图所示,可以把点改成任意需要的形状
这个是用
series: [{
marker: {
symbol: 'cross',
lineColor: null,
lineWidth: 2
}
}]
来实现的,其中symbol可以是圆"circle",正方形 "square",菱形"diamond",三角形 "triangle" and头朝下三角形 "triangle-down"等,也可以是图片地址"url(graphic.png)"。
4.重画图表(reflow)
这个问题出现在不刷新页面的情况下,为了适应页面显示的需求,怎样重画图表。当包含图表的外层div标签的宽高发生改变时,图表的大小也需要跟着改变,不然页面就不美观了。
具体代码如下,
$('#container').highcharts().reflow();
总结,HighCharts是一款十分好用的图表插件,在闲暇时间值得了解一下,http://www.hcharts.cn/docs 这是它的中文教程,里面十分详细,有时间可以学习一下哦~
- Highcharts使用时遇到的问题及解决方案
- 使用highcharts创建动态图表时遇到的问题及解决方式
- 使用计算机遇到的问题及解决方案
- 分享一个copyfile使用时遇到的问题及解决方案
- highcharts插件使用总结和开发中遇到的问题及解决办法
- 使用kettle工具遇到的问题汇总及解决方案
- Cloudera Hue 使用经验分享,遇到的问题及解决方案
- Android Studio 使用遇到的各种问题及解决方案汇总
- 使用TortoiseGit配置git遇到的问题及解决方案
- Maven使用过程中遇到的问题及解决方案
- 使用Git遇到的问题及解决方案(初级)
- Qt使用中遇到的问题及解决方案
- ng-table使用笔记-遇到的问题及解决方案
- 使用JDBC连接mysql数据库遇到的问题及解决方案
- Eclipse使用过程遇到问题及解决方案
- 在使用Telnet连接localhost时所遇到的问题及解决方案
- 使用angular-cli构建angular2项目时遇到的问题及解决方案
- highcharts 保存图片在ie8下遇到的问题与解决方案
- 添加自己的网络层
- PL/SQL如何设置主键自动递增
- 请求加密,响应数据解密,过期自动刷新并且重新请求接口
- 使用java下载一首歌(HttpClient/JavaIO)
- Jenkins学习
- Highcharts使用时遇到的问题及解决方案
- 移植笔记:使用qemu模拟器运行Kylin FT1500A.iso
- Java实战总结
- MongoDB学习(三) 基本操作
- 一致性哈希算法的一种PHP实现代码(上一篇文章)
- STL使用vtk类降幂
- oracle数据库:update更新多表总结
- 学生管理系统,实现学生的增删改查
- 定位到我的位置(BaiduMap)