图形实例：
源代码如下:
 
<!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. APP设计规范大全

    大图可保存到本地

  2. 世界国家名与英文名【json】

    英文版 var geolocation= [   ["AO", "Angola"],   ["AF", "Afghanistan& ...

  3. java菜鸟篇<三> Jquery弹窗插件Lhgdialog的用法（ 原文搬抄+添加，方便以后查找，书签太多了）

    今天带我的大神让我做个消息提示,我准备用dialog作,于是乎百度+自己动动脑子 百度原文: Lhgdialog的用法 大家都知道用js可以实现,但是在使用js实现的弹窗时得考虑很东西:浏览器的兼容. ...

  4. Hadoop配置文件-core-site.xml

     name value  Description   fs.default.name hdfs://hadoopmaster:9000 定义HadoopMaster的URI和端口  fs.checkp ...

  5. 从远程oracle上导入到本地同一张表中不存在的记录的方法

    场景:在远程oracle上存在一张表A,在本地同样存在一张相同表结构的表B.由于本地表B中保存了业务系统操作产生的几条记录,同时原来导入了A中的部分记录,但是并没有保存A中全部的记录.A中有15条记录 ...

  6. java.lang.RuntimeException: Unable to start activity ComponentInfo{com.ex.activity/com.ex.activity.LoginActivity}: android.view.InflateException: Binary XML file line #1: Error inflating class

    java.lang.RuntimeException: Unable to start activity ComponentInfo{com.ex.activity/com.ex.activity.L ...

  7. Counting Triangles(hd1396)

    Counting Triangles Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  8. 【stm32】ADC的规则通道和注入通道混合使用

    之前完成了规则通道DMA的数据传输了,不过平时在使用ADC的时候可能就会遇到很多情况,不可能就这样简单的按规则通道来采样,DMA存储,使用数据的:可能有时候会需要立刻采样,那样我们就需要利用到注入通道 ...

  9. Nand flash 的发展和eMMC

    讨论到eMMC的发展历程,必须要从介绍Flash的历史开始 Flash分为两种规格:NOR Flash和NAND Flash,两者均为非易失性闪存模块. 1988年,Intel首次发出NOR flas ...

  10. Z-Stack协议中几个重要概念的理解

    1. 原语     ZigBee设备在工作时,各种不同的任务在不同的层次上执行,通过层的服务,完成所要执行的任务.每一层的服务主要完成两种功能:根据它的下层服务要求,为上层提供相应的服务:另一咱是根据 ...