图形实例：
源代码如下:
 
<!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. Javascript DOM编程艺术JS代码

    //com function addLoadEvent (func) { var oldonload = window.onload; if (typeof window.onload != 'fun ...

  2. tomcat中的URL参数为中文，servlet接收后显示乱码

    URL中参数的值为中文时,servlet接收后显示为乱码,如下图: 这时候需要修改tomcat的中的server.xml文件.该文件路径为 tomcat安装目录下的conf文件夹.   为修改前的se ...

  3. K - Digital Roots(第二季水）

    Description The digital root of a positive integer is found by summing the digits of the integer. If ...

  4. PPT 制作必备工具

    1.图标 http://www.easyicon.net/ http://ico.58pic.com/ http://www.iconpng.com/ 2.字体 http://www.qiuziti. ...

  5. （原+转）Eclipse中Android调用OpenCv

    大部分都是参考下面的网址,如果感觉看起来不舒服,可以直接查看原网址.最后遇到了一点问题: Description      Resource Path Location   Type E:/~\cod ...

  6. 关于left join连接查询 两张表里有同名字段的问题

    左连接查询在开发中很常用,但有个问题常常会遇到,两个表中有同名字段时,比如左右表都有一个id字段,会造成查询结果中左表的id值被右表的id值覆盖掉(大部分php框架都是这个效果),而且还不会报错,容易 ...

  7. Avoid The Lakes--poj3620

    Avoid The Lakes Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7023   Accepted: 3735 D ...

  8. Problem 1008 Hay Points

    Problem Description Each employee of a bureaucracy has a job description - a few paragraphs that des ...

  9. SQL Server dbcc checkdb 修复

    默认dbcc checkdb 只做数据库的检测数据库是否完好.不会主动做数据库的修复,要修复数据库,需要数据库设单用模式. 1.repair_allow_data_loss  可能导致数据丢失. 2. ...

  10. Oracle EBS-SQL (OM-6):打开订单.sql

    /*打开头*/ update oe_order_headers_all t set t.flow_status_code = 'BOOKED', t.open_flag = 'Y' where t.o ...