zoukankan      html  css  js  c++  java
  • highcharts:根据Y的数值范围,动态改变图形的填充颜色

    图形实例:
    源代码如下:
     
    <!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>
  • 相关阅读:
    【Java】REST风格
    KMP(烤馍片)算法
    Lca求法 (树链剖分 与 倍增)
    hash学习笔记
    星际网络(数学)
    P3537 [POI2012]SZA-Cloakroom (背包)
    乘车路线 (二维最短路)
    渔民的烦恼 (二分)
    Jmeter 常用函数(18)- 详解 __isDefined
    Jmeter 常用函数(17)- 详解 __substring
  • 原文地址:https://www.cnblogs.com/nancy0324/p/4381063.html
Copyright © 2011-2022 走看看