highcharts:根据Y的数值范围，动态改变图形的填充颜色
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="http://code.highcharts.com/highcharts.js" type="text/javascript" charset="utf-8"></script>
<script src="http://blacklabel.github.io/multicolor_series/js/multicolor_series.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://blacklabel.github.io/multicolor_series/css/styles.css"/>
<script type="text/javascript">
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'coloredarea',
zoomType: 'xy',
borderWidth: 5,
borderColor: '#e8eaeb',
borderRadius: 0,
backgroundColor: '#f7f7f7'
},
title: {
style: {
'fontSize': '1em'
},
useHTML: true,
x: -27,
y: 8,
text: '<span class="chart-title">Multicolor series<span class="chart-href"> <a href="http://www.blacklabel.pl/highcharts" target="_blank"> Black Label </a> </span> <span class="chart-subtitle">plugin by </span></span>'
},
series: [{
type: 'coloredarea',
data: [{
y: 200,
segmentColor: 'rgba(255,0,0,0.5)'
}, {
y: 210,
segmentColor: 'rgba(120,255,120,0.5)'
}, {
y: 210,
segmentColor: 'rgba(255,0,0,0.5)'
}, {
y: 180,
segmentColor: 'rgba(120, 120, 250, 0.9)'
}, {
y: 180,
segmentColor: 'red'
}]
}]
});
});
</script>
<body>
<div id="container" class="chart"></div>
</body>
</html>
highcharts:根据Y的数值范围，动态改变图形的填充颜色的更多相关文章
- Android使用属性动画ValueAnimator动态改变SurfaceView的背景颜色
以下是主要代码,难点和疑问点都写在注释中: /** * 开始背景动画(此处为属性动画) */ private void startBackgroundAnimator(){ /* *参数解释: *ta ...
- [ActionScript 3.0] 动态改变影片剪辑的颜色
flash.geom.ColorTransform 可使用 ColorTransform 类调整显示对象的颜色值.可以将颜色调整或颜色转换应用于所有四种通道:红色.绿色.蓝色和 Alpha 透明度. ...
- jquery.range.js左右滑动选取数值插件，动态改变进度。
作为一个初级前端工作人员,我最近在做一个关于直播的项目,其中一个功能要求是设置延迟时间, 所以就用到了jquery.range.js这个插件.插件中设置$(".single-slider&q ...
- 带你体验Android自定义圆形刻度罗盘 仪表盘 实现指针动态改变
带你体验Android自定义圆形刻度罗盘 仪表盘 实现指针动态改变 转 https://blog.csdn.net/qq_30993595/article/details/78915115 近期有 ...
- [ActionScript 3.0] AS3动态改变注册点
package { import flash.display.DisplayObject; import flash.display.DisplayObjectContainer; import fl ...
- react img 被自动转成base64,无法根据当前路径来动态改变值的解决办法
项目需求,需要根据当前的图片的路径值的来(加或者减)动态改变其值: state定义如下: this.state={ basket01:0+require("../../img/egg/egg ...
- easyui如何动态改变列的编辑属性
动态改变列的编辑属性 var tt=$('#dg').datagrid('getColumnOption', 'yearContent'); //通过列名获得此列 tt.editor={type:'t ...
- jqGrid使用setColProp方法动态改变列属性
在使用jqGrid插件时,有时我们需要动态改变列的属性,可使用setColProp方法,用法如下 jQuery(”#grid_id”).setColProp('colname',{editoption ...
- jquery动态改变div宽度和高度
效果体验:http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...
随机推荐
- GDAL的安装和配置（编译proj.4）
1.下载地址 http://trac.osgeo.org/gdal/wiki/DownloadSource 下面是两个版本: http://pan.baidu.com/s/1bntuXER (1.1 ...
- 在IE中调试Javascript
不管我们写代码的时候如何小心,都不可能完全避免程序中出现bug,这个时侯就需要我们在调试的时候找出错误,修改代码. Javascript是一门灵活的语言,灵活的语法和它解释执行的特性,使得Javasc ...
- 如何看linux是32位还是64位
查看linux是多少位的几位方法: 查看linux机器是32位还是64位的方法: 方法一: file /sbin/init 或者 file /bin/ls 结果如下:/sbin/init: ELF ...
- SSH安全登录（远程管理）22端口
Linux管理Linux 先加密再发送数据,更安全 一 联机加密工具 非对称钥匙对加密 安装 默认安装 openssh 启动 ...
- Python即时网络爬虫项目: 内容提取器的定义
1. 项目背景 在python 即时网络爬虫项目启动说明中我们讨论一个数字:程序员浪费在调测内容提取规则上的时间,从而我们发起了这个项目,把程序员从繁琐的调测规则中解放出来,投入到更高端的数据处理工作 ...
- 计算球体积,hdu-2002
计算球体积 Problem Description 根据输入的半径值,计算球的体积. Input 输入数据有多组,每组占一行,每行包括一个实数,表示球的半径. Output 输出对应的球的体积 ...
- linux命令find应用
基本语法: find path -option [-print ] [-exec -ok command ] {} \; find命令的参数: pathname: find ...
- 【JavaScript】Object.prototype.toString.call()进行类型判断
权声明:本文为博主原创文章,未经博主允许不得转载. op = Object.prototype, ostring = op.toString, ... function isFunction(it) ...
- css+div布局案例
给最外层的div命名一个class 有针对性的进行css布局. <div class="joinus-info"> <div class="form-t ...
- NODE.JS安装配置