码迷,mamicode.com
首页 > 其他好文 > 详细

前端生成图表

时间:2017-04-07 21:56:23      阅读:349      评论:0      收藏:0      [点我收藏+]

标签:head   fetch   https   and   echart   containe   div   conf   username   

1、常用的前端生成图表的工具HighChartsecharts

2、具体内容可参考官方文档,有一些具体实例,JS和HTML的代码都存在,还可以编辑代码

技术分享

 

3、具体的设置还可以参考官方文档

4、使用样例:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
</head>
<body>
<div id="container"></div>
<script>
    Highcharts.setOptions({
        global: {
            useUTC: false
        }
    });
    $(function () {
        initChart();
    })

    function initChart() {
        //初始化一些参数
        var config = {
            chart: {
                type: spline
            },
            title: {
                text: 动态模拟实时数据
            },
            xAxis: {
                type: datetime
            },
            yAxis: {
                title: {
                    text: 
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: #808080
                }]
            },
            tooltip: {
                formatter: function () {
                    return <b> + this.series.name + </b><br/> +
                            Highcharts.dateFormat(%Y-%m-%d %H:%M:%S, this.x) + <br/> +
                            Highcharts.numberFormat(this.y, 2);
                }
            },
            legend: {
                enabled: true
            },
            exporting: {
                enabled: false
            },
            series: [
            ]
        }
        //发送ajax请求从后台取数据,将数据展示在前端
        $.ajax({
            url: /backend/get-data.html,
            dataType:JSON,
            success: function (arg) {
                config[series] = arg;
                $(#container).highcharts(config);
            }
        })
    }


</script>
</body>
</html>
def get_data(request):
    data ={}
    from django.db import connection,connections
    cursor = connection.cursor()
    users = models.User.objects.all()
    jsondata = []
    for i in range(1,4):
        user_obj = models.User.objects.filter(id = i).first()
        cursor.execute("""select strftime("%%s",strftime("%%Y-%%m-01",respository_trouble.ctime)) * 1000 as a,count(respository_trouble.id) as num,respository_user.username from respository_trouble,respository_user WHERE respository_user.id = respository_trouble.user_id and user_id = %s group by user_id,strftime("%%Y-%%m",respository_trouble.ctime)""",[i])
        rows = cursor.fetchall()
        print(rows)
        temp = {name:user_obj.username ,data:rows}
        jsondata.append(temp)
    import json
    return HttpResponse(json.dumps(jsondata))

 python里面的list数据通过JSON会直接转换成为list

前端生成图表

标签:head   fetch   https   and   echart   containe   div   conf   username   

原文地址:http://www.cnblogs.com/skiler/p/6679828.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!