zoukankan      html  css  js  c++  java
  • 一个highcharts混合图Demo

    公司要我做一个highcharts的mockup,其实半个小时就能做完了,我做了将近两个小时,唉!不过还好,总算把东西学会了。勤能补拙!

    把代码贴上来

    布局很简单,一个div里套两个div,给好id,就可以开始写js了。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8"></meta>
            <title></title>
            <link rel="stylesheet" src="./css/common.css" />
        </head>
        <body>
            <div style="100%;">
                <div id="bySector" style="49%;height:400px;display:inline-block;"></div>
                <div id="byBU" style="49%;height:400px;display:inline-block;"></div>
            </div>
            
            
            <script src="./js/jquery-1.8.3.min.js"></script>
            <script src="./js/highcharts/highcharts.js"></script>
            <script src="./js/highcharts/exporting.js"></script>
            <script src="./js/common.js"></script>
        </body>
    </html>

    JS

    写JS花了不少时间,甚至会犯很多很微小的错误,比如中文的逗号,分号结尾种种(捂脸)

    而且这个mockup是要有两个Y轴的,有一个Y轴要有百分号,并且数字部分得是浮点数,要用jQuery的parseFloat()转换一下,再用format属性加上%后return出来。

    然后还要在series里写上yAxis的序号,要不然数据对应不上,

    最后要在series里写上type,type在很多地方都可以改变,在plotOptions里也可以改type。

    $(function () {
        /* Highcharts.setOptions({ 
            colors:['#058DC7','#50B432','#ED561B','#DDDF00','#24CBE5','#64E572','#FF9655', '#FFF263', '#6AF9C4']
        });  */
        
        var bySector = new Highcharts.Chart({                  
            chart: {
                renderTo: 'bySector',
                type: 'column'                        
            },
            title: {
                text: 'By Sector 必须使用数量和使用率'
            },
            xAxis: {
                categories: ['Comsumer总体', 'OTC总体', 'XJP总体']  
            },
            yAxis: [
                {
                    tickInterval: 500,
                    min: 0,
                    max: 3500,
                    title: {
                        text: '必须使用量'
                    }
                },
                {
                    tickInterval: 10.00,
                    min: parseFloat(0).toFixed(2),
                    max: parseFloat(100).toFixed(2),
                    title: {
                        text: '使用率'
                    },
                    format: '{value}%',
                    opposite : true,
                    labels : {  
                        formatter : function() { 
                            return parseFloat(this.value).toFixed(2) + '%';
                        }
                    }
                },
            ],
            credits:{
                enable: false,
                text: ""
            },
            legend:{
                enable: true,
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100
            },
            plotOptions:{
                spline:{
                    allowPointSelect: true,
                    animation: true,
                    cursor: 'pointer',
                    dataLabels:{
                        enabled: true,
                        rotation: 0
                    },
                    enableMouseTracking: true
                }
            },
            series: [
                {
                    yAxis: 0,
                    name: '必须使用量',                         
                    data: [119, 633, 2985]                    
                }, 
                {
                    type: 'line',
                    color: '#D6CCA2',
                    yAxis: 1,
                    name: '使用率',
                    data: [31.09, 74.25, 50.69]
                }
            ]
        });
        
            var byBU = new Highcharts.Chart({                  
            chart: {
                renderTo: 'byBU',
                type: 'column'                        
            },
            title: {
                text: 'By BU 必须使用数量和使用率'
            },
            xAxis: {
                categories: ['Marketing', 'PR', 'R&D','RA','Sales','Empty','Consumer总体']  
            },
            yAxis: [
                {
                    tickInterval: 20,
                    min: 0,
                    max: 140,
                    title: {
                        text: '必须使用量'
                    }
                },
                {
                    tickInterval: 10.00,
                    min: parseFloat(0).toFixed(2),
                    max: parseFloat(100).toFixed(2),
                    title: {
                        text: '使用率'
                    },
                    format: '{value}%',
                    opposite : true,
                    labels : {  
                        formatter : function() { 
                            return parseFloat(this.value).toFixed(2) + '%';
                        }
                    }
                },
            ],
            credits:{
                enable: false,
                text: ""
            },
            legend:{
                enable: true,
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100
            },
            plotOptions:{
                spline:{
                    allowPointSelect: true,
                    animation: true,
                    cursor: 'pointer',
                    dataLabels:{
                        enabled: true,
                        rotation: 0
                    },
                    enableMouseTracking: true
                }
            },
            series: [
                {
                    yAxis: 0,
                    name: '必须使用量',                         
                    data: [21, 2, 3, 1, 51, 41, 119]                    
                }, 
                {
                    type: 'line',
                    color: '#D6CCA2',
                    yAxis: 1,
                    name: '使用率',
                    data: [47.62, 100.00, 0.00, 0.00, 39.22, 12.20, 31.09]
                }
            ]
        });
        
        
    });

    最后,JSON真是我这种数据结构白痴的福音!

  • 相关阅读:
    Codeforces Round #344 (Div. 2) C. Report 其他
    Codeforces Round #344 (Div. 2) B. Print Check 水题
    Codeforces Round #344 (Div. 2) A. Interview 水题
    8VC Venture Cup 2016
    CDOJ 1280 772002画马尾 每周一题 div1 矩阵快速幂 中二版
    CDOJ 1280 772002画马尾 每周一题 div1 矩阵快速幂
    CDOJ 1279 班委选举 每周一题 div2 暴力
    每周算法讲堂 快速幂
    8VC Venture Cup 2016
    Educational Codeforces Round 9 F. Magic Matrix 最小生成树
  • 原文地址:https://www.cnblogs.com/zcynine/p/5180506.html
Copyright © 2011-2022 走看看