django项目实战十一（django+bootstrap实现增删改查）进阶图表highcharts

目录

一、highcharts

1、配置

 二、实现

1、url

​2、highcharts.py

3、highcharts_list.html

---

接上一篇《django项目实战十（django+bootstrap实现增删改查）进阶数据统计》

一、highcharts

1、配置

使用说明看这里文件下载与使用 | Highcharts 使用教程

这里使用在线cdn服务方式，楼主试了很多次，失败 失败还是失败

<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>

 想知道原因，关注联系我

 二、实现

1、url

2、highcharts.py

from django.shortcuts import render
from django.http import JsonResponse



def highcharts_list(request):
    """highcharts 页面"""
    return render(request, 'highcharts_list.html')


def highcharts(request):
    """highcharts"""
    categories = ['苹果', '香蕉', '橙子']
    series = [
        {'name': '小明',
         'data': [1, 0, 4]},
        {'name': '小红',
        'data': [5, 7, 3]
        }
    ]

    result = {
        "status": True,
        "data": {
            "categories": categories,
            "series": series,
        }
    }
    print(JsonResponse(result))
    return JsonResponse(result)
    # return render(request, 'highcharts_list.html')

3、highcharts_list.html

  

{% extends 'layout.html' %}
{% block title %}
    <title>Highcharts</title>
{% endblock %}

{% block content %}
    <div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">Highcharts</div>
        <div class="panel-body">
            <div id="container" style="width: 100%;height:400px;"></div>

        </div>

    </div>


{% endblock %}


{% block js %}
    <!-- 引入 highcharts.js  <script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>-->

    <script src="http://cdn.hcharts.com.cn/highstock/highstock.js"></script>



    <script type="text/javascript">
        $(function () {
            inHighcharts();
        });

        function inHighcharts() {
            var options = {
                chart: {
                    type: 'bar'                          //指定图表的类型，默认是折线图（line）
                },
                title: {
                    text: '我的第一个Highcharts图表'                 // 标题
                },
                xAxis: {
                    categories: []   // x 轴分类
                },
                yAxis: {
                    title: {
                        text: '类型' ,               // y 轴标题
                        align: 'left'
                    }
                },
                series: []
            };


            $.ajax({
                url: "/highcharts/",
                type: "GET",
                dataType: "JSON",
                data: {
                    // 请求参数
                },
                success: function (res) {
                   // console.log(res.status);
                    if (res.status) {
                        // 将获取到的数据更新到 option 中
                        options.xAxis.categories = res.data.categories;
                        options.series = res.data.series;
                        // 图表初始化函数
                        var chart = Highcharts.chart('container', options);

                    }
                }
            })
        }

    </script>
{% endblock %}