当前位置:   article > 正文

Django 图表制作(By Highcharts)

django 图表

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

目录:

  1. highcharts 介绍
  2. highcharts 图表类型
  3. django + highcharts结合
  4. 质量平台 By Django + Highcharts + Mysql

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

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

名词解释

  1. lang:语言文字对象,所有Highcharts文字相关的设置
  2. chart:图表区、图形区和通用图表配置选项
  3. colors:图表数据列颜色配置,是一个颜色数组
  4. credits: 版权信息,Highcharts在图表的右下方放置的版权信息及链
  5. drilldown:钻取,向下钻取数据,深入到其中的具体数据
  6. exporting:导出模块,导出功能配置,导出即将图表下载为图片或打印图表
  7. legend:图例,用不同形状、颜色、文字等 标示不同数据列,通过点击标示可以显示或隐藏该数据列
  8. loading:加载中,加载选项控制覆盖绘图区的加载屏的外观和文字
  9. navigation:导航,导出模块按钮和菜单配置选项组
  10. noData:没有数据,没有数据时显示的内容
  11. pane:分块,针对仪表图和雷达图专用的配置,主要设置弧度及背景色
  12. plotOptions:针对不同类型图表的配置
  13. series:数据列,图表上一个或多个数据系列,比如图表中的一条曲线,一个柱形
  14. title:标题,包括即标题和副标题,其中副标题为非必须的
  15. tooltip:数据点提示框,当鼠标滑过某点时,以框的形式提示改点的数据,比如该点的值,数据单位等
  16. 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

以柱形图和圆饼图为例:

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

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

按编码步骤进行讲解:

前置UtilScript.py:

# -*- coding:utf-8 
  • 1
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/很楠不爱3/article/detail/164993
推荐阅读
相关标签
  

闽ICP备14008679号