葫芦的运维日志

下一篇 搜索 上一篇

---

折线效果图：

linedata数据格式：

{"data": [{"data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2749, 2151, 646, 2420, 217, 0, 0, 0, 0, 0, 0, 0, 0, 0], "name": "Apollo"}, {"data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 4, 0, 0, 0, 3152, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], "name": "GCLOUD"}], "result": true}

html+js代码:

<div class="chart" id="chartB"></div>
  
<script type="text/javascript">
var linedata=[];
var arr = new Array(32)
for (var i = 1; i < arr.length; i++) {
  arr[i] = i;
}
         $.ajax({
                url: "/countalarm/",
                type: 'GET',
                dataType: 'json',
                success: function (res) {
                    //获取数据成功
                    if (res.result) {
                        linedata = res.data;
            $('#chartB').kendoChart({
                legend: {
                    position: "bottom"
                },
                theme: 'bootstrap',
                seriesDefaults: {
                    type: 'area',
                    area: {
                        line: {
                            style: "smooth"
                        }
                    }
                },
                categoryAxis: {
                    categories: arr,
                    majorGridLines: {
                        visible: false
                    }
                },
                series: linedata
            });
}     }
            });
    </script>

 

葫芦的运维日志

打赏

上一篇 搜索 下一篇