图形实例：
源代码如下:
 
<!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. Spring 入门 Ioc-Annotation

    通过对XML版本进行修改:http://www.cnblogs.com/likailan/p/3446821.html 一.导入 Spring 所需要的包 spring-framework-2.5.6 ...

  2. Path Sum,Path Sum II

    Path Sum Total Accepted: 81706 Total Submissions: 269391 Difficulty: Easy Given a binary tree and a ...

  3. UVA 11214 Guarding the Chessboard

    题意: 皇后防御的范围是他所在横.竖.对角线,地图上的#为可以放旗子的地方.问最少放几个皇后能防守所有#. 分析: vis数组开4维,对应行.列.主对角线.副对角线 代码: #include < ...

  4. AngularJS入门基础PPT（附下载链接）

    学习了Angularjs有段时间,自己写了一个PPT,个人认为总结的非常全面,对于入门基础够了. 大致模块有:Angularjs简单介绍,Angularjs特性,hello world,Control ...

  5. 【应用】Markdown 在线阅读器

    前言 一款在线的 Markdown 阅读器,主要用来展示 Markdown 内容.支持 HTML 导出,同时可以方便的添加扩展功能.在这个阅读器的基础又做了一款在线 Github Pages 页面生成 ...

  6. SQL Server 与 Windows 内存使用上的约定

    什么时候SQL Server 会释放出自己的内存!以提供给别的程序用呢? --------------------------------------------------------------- ...

  7. 什么是Intent(意图)

    1.Intent是一种运行时绑定(runtime bingding)机制,它能在程序运行的过程中连接两个不同的组件.通过Intent,你的程序可以向Android表达某种 请求或者意愿,Android ...

  8. cf459D Pashmak and Parmida's problem

    D. Pashmak and Parmida's problem time limit per test 3 seconds memory limit per test 256 megabytes i ...

  9. linux之SQL语句简明教程---TRIM

    SQL 中的 TRIM 函数是用来移除掉一个字串中的字头或字尾.最常见的用途是移除字首或字尾的空白.这个函数在不同的资料库中有不同的名称: MySQL: TRIM( ), RTRIM( ), LTRI ...

  10. iframe 标签自适应高度和宽度

    iframe 结构如下 <iframe src="index.html" id="frame" frameborder="0" scr ...