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 ...
随机推荐
- JAVA byte有无符号数的转换
如果你只需要对英文文本的每个字节进行数据处理,则无需考虑有符号数和无符号数的转换问题: 但如果你需要对含有中文的文本进行字节处理,则可能需要考虑有无符号数的转换问题. 以下代码均为Java代码. 1. ...
- java二维码之利用谷歌的zxing生成二维码，解析二维码
生成二维码 @RequestMapping("/123") public void test(HttpServletRequest request,HttpServletRespo ...
- JavaMail简单接收邮件
一个简单的例子,收取所有邮件并在控制台输出. package cn.jmail.test; import java.io.*; import java.util.*; import javax.mai ...
- String, StringBuilder 与StringBuffer的区别与联系
1.区别 (1)String构建的对象不能改变,每次对String进行操作时,如两个String相加,需要新建一个String对象,然后容纳最终的结果. 而StringBuilder与StringBu ...
- 使用jquery插件uploadify上传文件的方法与疑问
我是学生一枚,专业也不是计算机,但又要用到很多相关技术,所以在技术基础不牢靠的情况下,硬着头皮在做.最近在做一个小项目需要上传图片,而且是需要用ajax的方式.但是利用jquery的ajax方法总会有 ...
- Android的动画
一.动画类型 Android的animation由四种类型组成:alpha.scale.translate.rotate XML配置文件中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画 ...
- Pet--hdu4707
Pet Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- Goldbach's Conjecture（哥德巴赫猜想）
Goldbach's Conjecture Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Ot ...
- EF6.0 自定义Code First约定
自定义Code First约定有三种方式,分别是:Lightweight Conventions(轻量级约定).Configuration Conventions(配置型约定).Model-based ...
- xcode 5与ios 7的屏幕适配问题
#define DEVICE_IS_IPHONE5 ([[UIScreen mainScreen] bounds].size.height == 568) float height = DEVICE_ ...