图形实例：
源代码如下:
 
<!DOCTYPE html>
<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的数值范围，动态改变图形的填充颜色的更多相关文章

  1. Android使用属性动画ValueAnimator动态改变SurfaceView的背景颜色

    以下是主要代码,难点和疑问点都写在注释中: /** * 开始背景动画(此处为属性动画) */ private void startBackgroundAnimator(){ /* *参数解释: *ta ...

  2. [ActionScript 3.0] 动态改变影片剪辑的颜色

    flash.geom.ColorTransform 可使用 ColorTransform 类调整显示对象的颜色值.可以将颜色调整或颜色转换应用于所有四种通道:红色.绿色.蓝色和 Alpha 透明度. ...

  3. jquery.range.js左右滑动选取数值插件，动态改变进度。

    作为一个初级前端工作人员,我最近在做一个关于直播的项目,其中一个功能要求是设置延迟时间, 所以就用到了jquery.range.js这个插件.插件中设置$(".single-slider&q ...

  4. 带你体验Android自定义圆形刻度罗盘 仪表盘 实现指针动态改变

    带你体验Android自定义圆形刻度罗盘 仪表盘 实现指针动态改变 转 https://blog.csdn.net/qq_30993595/article/details/78915115   近期有 ...

  5. [ActionScript 3.0] AS3动态改变注册点

    package { import flash.display.DisplayObject; import flash.display.DisplayObjectContainer; import fl ...

  6. react img 被自动转成base64,无法根据当前路径来动态改变值的解决办法

    项目需求,需要根据当前的图片的路径值的来(加或者减)动态改变其值: state定义如下: this.state={ basket01:0+require("../../img/egg/egg ...

  7. easyui如何动态改变列的编辑属性

    动态改变列的编辑属性 var tt=$('#dg').datagrid('getColumnOption', 'yearContent'); //通过列名获得此列 tt.editor={type:'t ...

  8. jqGrid使用setColProp方法动态改变列属性

    在使用jqGrid插件时,有时我们需要动态改变列的属性,可使用setColProp方法,用法如下 jQuery(”#grid_id”).setColProp('colname',{editoption ...

  9. jquery动态改变div宽度和高度

    效果体验:http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...

随机推荐

  1. hdu2206IP的计算

    Problem Description 在网络课程上,我学到了很多有关IP的知识.IP全称叫网际协议,有时我们又用IP来指代我们的IP网络地址,现在IPV4下用一个32位无符号整数来表示,一般用点分方 ...

  2. Http 信息头

    Http协议定义了很多与服务器交互的方法,最基本的有4种,分别是GET.POST.PUT.DELETE.一个URL地址用于描述一个网络上的资源,而HTTP中的GET.POST.PUT. DELETE就 ...

  3. Spring Annotation注解进行aop的学习

    使用Maven管理项目,pom文件为: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=" ...

  4. HDU 2458 - Kindergarten

    有一堆男孩和女孩,男孩和男孩之间,女孩和女孩之间互相认识,给出一堆男孩女孩之间认识的关系, 问一个组里最多多少人相互都认识 那么 二分图里 将不认识的连线 那么 相互认识的人最多 就为 最大独立点集 ...

  5. arm ldr 指令

    ldr 指令格式:(读取概念) ldr{条件} 1目的寄存器,2存储器地址 eg: ldr r0,[r1]; 把r1中数据值读取到r0中: ldr r0,[r1,r2];把r1+r2的数值 读取到r0 ...

  6. 判断浏览器IE6

    <!--[if lte IE 6]><LINK rel="stylesheet" type="text/css" href="ima ...

  7. Android 创建自定义布局

    我们所有的控件都是继承至View类的,而所有的布局都是继承至ViewGroup的,所以我们也可以继承某个view类来实现我们自己的布局或者控件. 引入布局 我们新建一个title.xml的layout ...

  8. JS三元运算符

    语法是 条件 ? 结果1 : 结果2; 问号(?)的前面是条件:后面跟着用冒号(:)分隔的结果1和结果2;满足条件时结果1否则结果2. 例子: var a=1; a>2?a:a=3; alert ...

  9. 【stm32】实现STM32的串口数据发送和printf函数重定向

    在调试电机驱动程序的时候,是不能随便利用中断来进行一些寄存器或数据的查看的,不然你在运行的时候突然来一下,如果占空比大的话那可能直接就把MOS管给烧了,所以我们很多情况下只能使用USART(串口)来进 ...

  10. Thinking in C++: 第1章 为什么C++会成功（改进了C的缺点，可复用C的知识与库，执行效率相当）

    本文内容摘抄自C++经典书籍:<Thinking in C++>   操作概念:OOP程序像什么 我们已经知道,用C 语言编写的过程程序就是一些数据定义和函数调用.要理解这种程序的含义,程 ...