首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >cssjshtml ajax+echart折线图

cssjshtml ajax+echart折线图

作者头像
葫芦
发布2019-04-17 14:41:02
9670
发布2019-04-17 14:41:02
举报
文章被收录于专栏:葫芦葫芦

折线效果图:

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>

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017/10/23 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 折线效果图:
  • linedata数据格式:
  • html+js代码:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档