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 ...
随机推荐
- C#制作简易屏保（转）
C#制作简易屏保[原创] 原始网址: http://www.cnblogs.com/drizzlecrj/archive/2006/10/06/522182.html 2006-10-06 16:25 ...
- install boost in ubuntu
1. 获取boost安装包 a. 使用命令下载. wget -O boost_1_54_0.tar.bz2 http://downloads.sourceforge.net/project/boost ...
- 匈牙利算法（素数伴侣（HW1112））
#define _CRT_SECURE_NO_WARNINGS #include<iostream> #include<vector> #include<string&g ...
- SQL Server 查看当前活动的锁
第一步: 要查看活动中的锁,如果日前根本就没有活动中的锁怎么办,还好我会自己做一把. begin tran select * from dbo.Nums with(ta ...
- MYSQL 注释的 3 方法
方法 1.单行注释 # 方法 2.单行注释 -- 方法 3.多行注释 /*------*/ ------------------------------------------------------ ...
- hibernate中save,update,saveorupdate
save在添加用的时候 不会出现索引机制(即遍历目录 效率最高)update在修改时候要遍历 不存在则会异常saveorupdate是优先遍历 如果不存在则创建(效率最低)
- html5 新增语义标签
一份模板: <body> <header> <hgroup> <h1>Page title</h1> <h2>Page subt ...
- C语言的本质（15）——C语言的函数接口入门
C语言的本质(15)--C语言的函数接口 函数的调用者和其实现者之间存在一个协议,在调用函数之前,调用者要为实现者提供某些条件,在函数返回时,实现者完成调用者需要的功能. 函数接口通过函数名,参数和返 ...
- linux下修改ip地址，默认网关以及DNS
*修改IP地址 即时生效: ifconfig eth0 192.168.1.100 netmask 255.255.255.0 重启生效: vim /etc/sysconfig/network-s ...
- 数据挖掘之分类算法---knn算法(有matlab例子)
knn算法(k-Nearest Neighbor algorithm).是一种经典的分类算法.注意,不是聚类算法.所以这种分类算法 必然包括了训练过程. 然而和一般性的分类算法不同,knn算法是一种懒 ...