highcharts分段显示不同颜色
最近在做统计图的时候,碰到一个需求 类似如下:
就是在红色虚线框内的折线在不同区域用不同的颜色表示,并且是虚线。
开始定位为用highcharts库实现。确定用这个库后,开始在网上查资料,发现有类似的例子,网址是:http://code.hcharts.cn/hcharts.cn/hhhhco
$(function () {
$('#container').highcharts({
series: [{
data: [-10, -5, 0, 5, 10, 15, 10, 10, 5, 0, -5],
zones: [{
value: 0,
color: '#f7a35c',
dashStyle: 'dot'
}, {
value: 10,
color: '#7cb5ec'
},{
color: '#90ed7d'
},
]
}]
});
});
highcharts demo
效果图如下:
发现它使根据y轴的value值来分段展示的,虽然不符合我的要求,但是从中可以看到2点提示:
1. 分段显示可以根据series 中的zones 来实现;
2. 虚线可以用dashStyle: 'dot' 来实现;
要想看这个库能否实现我们的需求,最好的办法是查它的API。功夫不负有心人,我在API中找到实现方法。
在 plotOptions.series.zoneAxis 中可以选定使根据x的value还是y得value 来分段,默认是y轴的value,然后我们在series中设置zones就可以了。
具体网址 http://api.highcharts.com/highcharts#plotOptions.series.zones
最近在做报表中几乎翻遍了highcharts 的API,发现了它的强大,也解决了很多奇葩问题,另外也研究了另一个javascript图表插件echarts,它也是一个非常强大的图表库。大家如果在用这两个图表库中碰到什么问题,我们可以一起探讨。
highcharts分段显示不同颜色的更多相关文章
- android控件TextView之 分段显示不同颜色
代码如下: attrs.xml文件: 第二种方式: String newMessageInfo = "<font color='red'><b>" + 红色 ...
- 【WPF】TextBlock文本文字分段显示不同颜色
需求:一行文字中,不同字符显示不同颜色.如注册页面,为表示必填项,在文本最后加一个红色的型号* 目标效果: 方法一: 用< StackPanel >嵌套两个< TextBlock & ...
- winform中dataGridView隔行显示不同的背景色,鼠标移动上显示不同颜色,离开后变回原色
winform中dataGridView隔行显示不同的背景色,鼠标移动上显示不同颜色,离开后变回原色 先设置奇数行颜色,这个有个自带的属性AlternatingRowsDefaultCellStyle ...
- python: HTML之 鼠标放上去下拉项字体显示不同颜色
鼠标放上去下拉项字体显示不同颜色 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "h ...
- 超赞的CSS3进度条 可以随进度显示不同颜色
原文:超赞的CSS3进度条 可以随进度显示不同颜色 现在的WEB已经不是以前的WEB了,传输更大的数据量,有着更加复杂的计算,这就需要利用进度条来提高用户体验,必要时可以让用户耐心等待,不至于因操作卡 ...
- 设置UIButton中的文字和图片,设置UILabel的文在显示不同颜色
UIButton: UIEdgeInsets 在UIButton中有三个对EdgeInsets的设置:ContentEdgeInsets.titleEdgeInsets.imageEdgeInsets ...
- Matlab scatter 如何显示不同颜色点状
有时候需要在matlab scatter绘图中显示不同颜色区分,如下图是人体血压高压.低压与年龄关系的散点图. 红色点表示高压 绿色点表示低压 用 matlab 如何实现呢? 1.创建一维矩阵x,y1 ...
- echarts彩虹柱状图 每个bar显示不同颜色, 标题在不同位置 ,工具中有可以直接保存为图片下载,平均线的添加
可以参考: https://echarts.baidu.com/echarts2/doc/example.html https://echarts.baidu.com/echarts2/doc/doc ...
- RichTextBox指定全部文字显示不同颜色及部分文字高亮颜色显示
指定全部显示不同颜色: public void SetTextContent(string text, ColorEnum color) { Font font = , FontStyle.Bold) ...
随机推荐
- uIP学习笔记
uIP学习笔记 从零开始使用uIP freemodbus modbus TCP 学习笔记
- ListView控件的Insert、Edit和Delete功能(第一部分)
摘自:http://blog.ashchan.com/archive/2007/08/28/listview-control-insert-edit-amp-delete-part-1aspx/ Li ...
- 用GeneratedKeyHolder获得新建数据主键值
public User createUser(final User user) { final String sql = "insert into sys_users(username, p ...
- SqlMapClient ,SqlExecutor 和SqlMapClientTemplate 的区别?
SqlMapClient SqlExecutor SqlMapClientTemplate
- java 数据结构 图
以下内容主要来自大话数据结构之中,部分内容参考互联网中其他前辈的博客,主要是在自己理解的基础上进行记录. 图的定义 图是由顶点的有穷非空集合和顶点之间边的集合组成,通过表示为G(V,E),其中,G标示 ...
- const与static的区别
const就是只读的意思,只在声明中使用;const修饰的数据类型是指常类型,常类型的变量或对象的值是不能被更新的. const的作用: (1)可以定义const常量,具有不可变性. (2)便于进行类 ...
- HDU2216:Game III(BFS)
Game III Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) Total Subm ...
- hdu1426 Sudoku Killer
Sudoku Killer Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) Total ...
- 网络摄像头Androi端显示(mjpeg)源码分析
main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:and ...
- java 对象的上转型对象(父类)
Example5_10.java class 类人猿 { void crySpeak(String s) { System.out.println(s); } } class People exten ...