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>
  • 相关阅读:
    A1047 Student List for Course [unordered_map]
    .net 事务处理的三种方法
    SQline安装
    LeetCode 21 _ 合并两个有序链表
    LeetCode 191 _ 位1的个数
    LeetCode 268 _ 缺失数字
    LeetCode 190 _ 位运算
    LeetCode 136 _ 位运算
    LeetCode 461 _ 位运算
    LeetCode 125 _ 字符串
  • 原文地址:https://www.cnblogs.com/nancy0324/p/4381063.html
Copyright © 2011-2022 走看看