图形实例：
源代码如下:
 
<!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. 在sql server中怎样获得正在执行的Sql查询

    方法1:使用DBCC inputbuffer(spid) 使用SP_WHO获得SPID,然后再执行上面的DBCC command,参见下图 执行一段sql语句 打开另一个query窗口并执行SP_WH ...

  2. Spring-----9、容器中bean的生命周期

    转载自:http://blog.csdn.net/hekewangzi/article/details/45648771

  3. linux下C++ STL hash_map的使用以及使用char *型变量作为Key值的一大“坑”

    计算机编程中经常会用到hash表,而在C++中,使用STL编程更是少不了的.本文将介绍STL中hash_map的使用.在hash_map中使用自定义类型作为key值的方法以及在使用char *类型作为 ...

  4. List小练习

    功能:创建链表节点,删除节点,顺序打印,不改变原结构的情况下分别用STL中的stack实现逆序打印和利用函数递归打印 代码如下: //链表问题struct ListNode {    int m_nV ...

  5. [转载]提升进程权限-OpenProcessToken等函数的用法

    GetCurrentProcessID 得到当前进程的ID OpenProcessToken 得到进程的令牌句柄LookupPrivilegeValue 查询进程的权限 AdjustTokenPriv ...

  6. java压缩/解压缩zip格式文件

    因为项目要用到压缩.解压缩zip格式压缩包,只好自己封装一个,对于网上流行的中文乱码的问题,本文的解决方法是用apache的包代替jdk里的.基本上还是比较好用的. 废话少说,直接上代码. }     ...

  7. 自动化高效css开发，畅谈less的灵活变化

    css是一种让html与样式分离解析而出现的代码,它的出现大大提高了程序员的工作效率,和后期进行维护的效率.但是发展至今,由于起死板单调的写法,越来越不能满足程序员们灵活的思维,很多时候是种恨铁不成钢 ...

  8. PHP_CURL请求教程, 内含简单粗暴curl

    //curl访问 //需要url或者data //返回的数组是JSON数据形式 function ppd_curl($url,$data = null){ //\Think\Log::record($ ...

  9. SQL Server 日志文件增长原因定位

    方法 1.sys.databases; -------------------------------------------------------------------------------- ...

  10. Nginx 配置指令的执行顺序（三）

    如前文所述,除非像 ngx_set_misc 模块那样使用特殊技术,其他模块的配置指令即使是在 rewrite 阶段运行,也不能和 ngx_rewrite 模块的指令混合使用.不妨来看几个这样的例子. ...