Django 图表制作（By Highcharts）

最新推荐文章于 2025-05-07 11:07:03 发布

Tim（杨霆）

最新推荐文章于 2025-05-07 11:07:03 发布

阅读量2.1w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Timen_Django 文章标签： django highcharts django图表

本文链接：https://blog.csdn.net/Temanm/article/details/54141759

Timen_Django 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在Django项目中使用Highcharts库创建各种图表，包括Highcharts的基本组成、图表类型，以及Django中整合Highcharts的步骤，展示了柱形图和圆饼图的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

摘要：
Highcharts 是一个用纯 JavaScript 编写的一个图表库，能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。

highcharts 介绍
highcharts 图表类型
django + highcharts结合
质量平台 By Django + Highcharts + Mysql

内容：
一. highcharts 介绍
Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图。

Highcharts 基本组成
这里写图片描述

名词解释

lang：语言文字对象，所有Highcharts文字相关的设置
chart：图表区、图形区和通用图表配置选项
colors：图表数据列颜色配置，是一个颜色数组
credits: 版权信息，Highcharts在图表的右下方放置的版权信息及链
drilldown：钻取，向下钻取数据，深入到其中的具体数据
exporting：导出模块，导出功能配置，导出即将图表下载为图片或打印图表
legend：图例，用不同形状、颜色、文字等标示不同数据列，通过点击标示可以显示或隐藏该数据列
loading：加载中，加载选项控制覆盖绘图区的加载屏的外观和文字
navigation：导航，导出模块按钮和菜单配置选项组
noData：没有数据，没有数据时显示的内容
pane：分块，针对仪表图和雷达图专用的配置，主要设置弧度及背景色
plotOptions：针对不同类型图表的配置
series：数据列，图表上一个或多个数据系列，比如图表中的一条曲线，一个柱形
title：标题，包括即标题和副标题，其中副标题为非必须的
tooltip：数据点提示框，当鼠标滑过某点时，以框的形式提示改点的数据，比如该点的值，数据单位等
Axis：坐标轴，包括x轴和y轴。多个不同的数据列可共用同一个X轴或Y轴，当然，还可以有两个X轴或Y轴，分别显示在图表的上下或左右

二.highcharts 图表类型
详情请查阅官方图表类型介绍文档：https://www.hcharts.cn/demo/highcharts

三.django + highcharts
django采取MVC框架，我们分4个Python文件，包括：models.py views.py url.py以及html模板文件
models.py文件主要和数据打交道，连接数据库，将数据提取交给view.py，也就是MVC中的M
views.py文件主要是将数据传给html，业务层，对web发过来的POST和GET请求进行处理，也就是MVC中的C
url.py文件主要是指定什么url展现那个html视图，相当于MVC中的V

以柱形图和圆饼图为例：

官方柱形图文档JS+HTML:https://www.hcharts.cn/demo/highcharts/column-drilldown
官方圆饼图文档JS+HTML:https://www.hcharts.cn/demo/highcharts/pie-basic

需求：制作如下图的柱形图和圆饼图
这里写图片描述

按编码步骤进行讲解：

前置UtilScript.py：

# -*- coding:utf-8 -*-
import MySQLdb
# ----------------------------
# 错误码
# 正常返回 code : 200
# 数据连接失败 code : 400
# 请求参数有误 code : 401
# ----------------------------

# 连接MySQL db
def connect_db(db):
    try:
        conn = MySQLdb.connect(host="10.9.8.*",
                             port=3306,
                             user="monitor",
                             passwd="monitor1",
                             db=db,
                             charset="utf8")
    except Exception, e:
        conn = 400
    return conn



# 请求MySQL获取数据
def get_data(db, sql):
    conn = connect_db(db)
    if conn == 400:
        return conn
    else:
        try:
            cur = conn.cursor()
            cur.execute(sql)
            data = cur.fetchall()
            cur.close()
            conn.commit()
            conn.close()
            return data
        except Exception, e:
            return 401

第一步：编写models.py文件，将数据从mysql中取出

# -*- coding:utf-8 -*-
from UtilScript import ConnMySql
import sys
reload(sys)
sys.setdefaultencoding("utf-8")

# 按模块划分bug
def get_bugs_by_module():
    sql_modules = "select distinct bug_module from `bugs`"
    temp_modules = ConnMySql.get_data("schedule", sql_modules)
    modules = []
    for i in temp_modules:
        modules.append(i[0])
    modules_number = []
    for i in modules:
        sql_modules_number = "select count(*) from `bugs` where bug_module=\"%s\"" % str(i)
        modules_number.append(int(ConnMySql.get_data("schedule", sql_modules_number)[0][0]))
    return modules, modules_number

第二步：将models.py传过来的数据传给html模板进行渲染

# -----------------------------
# 缺陷统计
# -----------------------------
def bug_statistics(request):
    # bug by module
    temp_modules = BugStatistics.get_bugs_by_module()
    modules = temp_modules[0]
    modules_numbers = temp_modules[1]
    modules_pie = []
    for i in range(len(modules)):
        modules_pie.append([modules[i], modules_numbers[i]])

    # bug by reporter
    temp_reporter = BugStatistics.get_bug_by_reporter()
    reporter = temp_reporter[0]
    reporter_bug_number = temp_reporter[1]
    reporter_pie = []
    for i in range(len(reporter)):
        reporter_pie.append([reporter[i], reporter_bug_number[i]])

    # bug by result
    temp_result = BugStatistics.get_bug_by_result()
    result = temp_result[0]
    result_number = temp_result[1]
    result_pie = []
    for i in range(len(result)):
        result_pie.append([result[i], result_number[i]])

    return render_to_response("BugStatistics.html", {
        'modules': modules,
        'modules_numbers': modules_numbers,
        'modules_pie': modules_pie,
        'reporters': reporter,
        'reporter_bug_number': reporter_bug_number,
        'reporter_pie': reporter_pie,
        'results': result,
        'result_number': result_number,
        'result_pie': result_pie
    })

第三步：将views.py传给html的数据，在html利用{{ 参数 }}进行调用，展示出来

<script type="text/javascript">
        $(function () {
            $('#container_pic_module_column').highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: '按项目分类-柱形图'
                },
                xAxis: {
                    categories: [
                        {% for module in modules %}
                            "{{module}}",
                        {% endfor %}
                        ]
                     },
                yAxis: {
                    min: 0,
                    alternateGridColor: '#FDFFD5',
                    title: {
                        text: 'Bug数量'
                    }
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: 'Bug数量',
                    data: {{modules_numbers}}
                }]
            });
        });
    </script>
    <script type="text/javascript">
        $(function () {
            $('#container_pic_module_pie').highcharts({
                chart: {
                    type: 'pie'
                },
                title: {
                    text: '按项目分类-圆饼图'
                },
                tooltip: {
                    pointFormat: '{series.name}:<b>{point.percentage:.1f}%</b>'
                },
                series: [{
                    type:'pie',
                    name: 'Bug百分比',
                    data:
                    [
                        {% for module in modules_pie %}
                            ["{{module.0}}",{{module.1}}],
                        {% endfor %}
                    ]
                 }]
            });
        });
    </script>