zoukankan      html  css  js  c++  java
  • highcharts绘制折线图

    /**
     * 绘制分析图表,取数据
     * 
     */
    function drawRzhAnalysisBIG() {
    $.ajax({
    url : baseUrl + "/TOverhualtaskController?method=badAnalysis",
    dataType : "json",
    data : getQueryParameter(),
    success : function(json) {
    drawRzhBIG(json);
    }
    });
    }


    /**
     * 绘制图表
     * 
     * @param {}
     *            json
     */
    function drawRzhBIG(json) {
    $('#BIGDraw').highcharts({
    credits : {
    enabled : false
    // 去掉highcharts网站url
    },
    chart : {
    type : 'line',
    marginRight : 0,
    marginBottom : 25
    },
    title : {
    text : '相对横向折线图',
    align:'left',
    x : 100
    },
    subtitle : {
    text : '',
    x : 0
    },
    xAxis : {
    categories : json.xDate,
    labels: {
                   rotation: 15
               }
    },
    yAxis : {
    title : {
    text : '相对横向(%)'
    },
    plotLines : [{
    value : 0,
    width : 1,
    color : '#808080'
    }]
    },
    tooltip : {
    valueSuffix : '%'
    },
    legend : {
    layout : 'horizontal',
    align : 'right',
    verticalAlign : 'top',
    x : 5,
    y : 5,
    borderWidth : 0
    },
    series : [{
    name : '最大值',
    data : json.rzhMax
    }, {
    name : '平均值',
    data : json.rzhAvg
    }, {
    name : '最小值',
    data : json.rzhMin
    }]
    });

    }

    rzhMax  rzhAvg  rzhMin  这三个是 后来取来的list



    <div id="BIGDraw" style="float:left;98%;margin:10px;height:390px;">
    </div>


    版权声明:本文为博主原创文章,未经博主允许不得转载。

  • 相关阅读:
    PTA A1005&A1006
    PTA A1003&A1004
    PTA A1001&A1002
    MOOC web前端开发笔记(二)
    MOOC web前端开发笔记(一)
    MOOC C++笔记(三):类和对象提高
    MOOC C++笔记(二):类和对象基础
    MOOC C++笔记(一):从C到C++
    linux command tee
    modbus数据格式(一)
  • 原文地址:https://www.cnblogs.com/shipeng22022/p/4614014.html
Copyright © 2011-2022 走看看