Django显示可视化图表的实践

一 实战

1 Django_lab\urls.py

# -*- coding: utf-8 -*-

from django.conf.urls import url,include
from django.contrib import admin

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    # 定义图表url
    url(r'^chart/', include('chart.urls')),
]

2 在settings.py中添加图表应用

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    # 图表应用
    'chart',
]

3 chart\urls.py

# -*- coding: utf-8 -*-
from django.conf.urls import url,include
from . import views
urlpatterns = [
    # 折线图的url
    url(r'^linediagram/$', views.showlinediagram),
]

4 views.py

# -*- coding: utf-8 -*-
from django.shortcuts import render
from django.http import HttpResponse

from matplotlib.figure import Figure
from matplotlib.backends.backend_agg import FigureCanvasAgg
from matplotlib.dates import DateFormatter
import matplotlib.pyplot as plt

import random
import datetime

# 折线图对应的的模板
def showlinediagram(request):
    return render(request, 'chart/showlinediagram.html')

5 模板showlinediagram.html

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
   var title = {
       text: '月平均气温'
   };
   var subtitle = {
        text: 'Source: runoob.com'
   };
   var xAxis = {
       categories: ['一月', '二月', '三月', '四月', '五月', '六月'
              ,'七月', '八月', '九月', '十月', '十一月', '十二月']
   };
   var yAxis = {
      title: {
         text: 'Temperature (\xB0C)'
      },
      plotLines: [{
         value: 0,
         width: 1,
         color: '#808080'
      }]
   };

   var tooltip = {
      valueSuffix: '\xB0C'
   }

   var legend = {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 0
   };

   var series =  [
      {
         name: 'Tokyo',
         data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
            26.5, 23.3, 18.3, 13.9, 9.6]
      },
      {
         name: 'New York',
         data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,
            24.1, 20.1, 14.1, 8.6, 2.5]
      },
      {
         name: 'Berlin',
         data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
            17.9, 14.3, 9.0, 3.9, 1.0]
      },
      {
         name: 'London',
         data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0,
            16.6, 14.2, 10.3, 6.6, 4.8]
      }
   ];

   var json = {};

   json.title = title;
   json.subtitle = subtitle;
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.tooltip = tooltip;
   json.legend = legend;
   json.series = series;

   $('#container').highcharts(json);
});
</script>
</body>
</html>

二 测试结果

1 浏览器输入：http://localhost:8000/chart/linediagram

2 结果显示结果

三 参考

https://blog.csdn.net/Temanm/article/details/54141759

https://my.oschina.net/jastme/blog/357142

https://www.hcharts.cn/demo/highcharts/

http://www.runoob.com/highcharts/highcharts-configuration-syntax.html

到此这篇关于Django显示可视化图表的实践的文章就介绍到这了,更多相关Django 可视化图表内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Django展示可视化图表的多种方式

    Django展示可视化图表的多种方式

    1. 前言 大家好,我是安果! 使用 Django 进行 Web 开发时,经常有需要展示图表的需求,以此来丰富网页的数据展示 常见方案包含:Highcharts.Matplotlib.Echarts.Pyecharts,其中后 2 种方案使用频率更高 本篇文章将聊聊 Django 结合 Echarts.Pyecharts 实现图表可视化的具体流程 2. Echarts Echarts 是百度开源的一个非常优秀的可视化框架,它可以展示非常复杂的图表类型 以展示简单的柱状图为例,讲讲 Django

  • Django显示可视化图表的实践

    Django显示可视化图表的实践

    一 实战 1 Django_lab\urls.py # -*- coding: utf-8 -*- from django.conf.urls import url,include from django.contrib import admin urlpatterns = [ url(r'^admin/', admin.site.urls), # 定义图表url url(r'^chart/', include('chart.urls')), ] 2 在settings.py中添加图表应用 IN

  • Django使用echarts进行可视化展示的实践

    Django使用echarts进行可视化展示的实践

    本文以学生成绩折线图展示为例 条件准备 电脑上有myslq数据库 有 echarts 的 js 文件 连接mysql # settings.py 文件 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', # mysql 数据库名 'NAME': 'chaochao', # mysql 登陆用户名 'USER': 'root', # myslq 登陆密码 'PASSWORD': 'chaochao666', 'HOST'

  • vue-cli和v-charts实现可视化图表过程解析

    vue-cli和v-charts实现可视化图表过程解析

    v-charts是饿了么团队开源的一款基于Vue和Echarts的图表工具,在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化.修改复杂的配置项,v-charts 的出现正是为了解决这个痛点.基于 Vue2.0 和 echarts 封装的 v-charts 图表组件,只需要统一提供一种对前后端都友好的数据格式设置简单的配置项,便可轻松生成常见的图表. v-charts的中文社区文档(https://v-charts.js.org/#/),可根据项目需要自主学习和浏览: 因为项目需要

  • 一篇文章让你快速掌握Pandas可视化图表

    一篇文章让你快速掌握Pandas可视化图表

    目录 前言 1. 概述 2. 图表元素设置 3. 常见图表类型 4. 其他图表类型 总结 前言 今天简单介绍一下Pandas可视化图表的一些操作,Pandas其实提供了一个绘图方法plot(),可以很方便的将Series和Dataframe类型数据直接进行数据可视化. 1. 概述 这里我们引入需要用到的库,并做一些基础设置. import pandas as pd import numpy as np import matplotlib.pyplot as plt # 设置 可视化风格 plt.

  • pyecharts绘制各种数据可视化图表案例附效果+代码

    pyecharts绘制各种数据可视化图表案例附效果+代码

    目录 1.pyecharts绘制饼图(显示百分比) 2.pyecharts绘制柱状图 3.pyecharts绘制折线图 4.pyecharts绘制柱形折线组合图 5.pyecharts绘制散点图 6.pyecharts绘制玫瑰图 7.pyecharts绘制词云图 8.pyecharts绘制雷达图 9.pyecharts绘制散点图 10.pyecharts绘制嵌套饼图 11.pyecharts绘制中国地图 12.pyecharts绘制世界地图 1.pyecharts绘制饼图(显示百分比) # 导入

  • Python实现提取图片中颜色并绘制成可视化图表

    Python实现提取图片中颜色并绘制成可视化图表

    目录 导入模块并加载图片 提取颜色并整合成表格 绘制图表 实战环节 今天小编来为大家分享一个有趣的可视化技巧,如何从图片中提取颜色然后绘制成可视化图表,如下图所示 在示例照片当中有着各种各样的颜色,我们将通过Python中的可视化模块以及opencv模块来识别出图片当中所有的颜色要素,并且将其添加到可视化图表的配色当中 导入模块并加载图片 那么按照惯例,第一步一般都是导入模块,可视化用到的模块是matplotlib模块,我们将图片中的颜色抽取出来之后会保存在颜色映射表中,所以要使用到colorm

  • echarts几个公司内部数据可视化图表必收藏

    echarts几个公司内部数据可视化图表必收藏

    目录 折线图 日负荷折线图 最大需求表 柱状图 日电量柱状图 分时电量 功率因数 三相温度 水球图 年月日负荷率图 散点图 三相平衡 最近公司有一个需求,要做一个数据可视化的页面,所有的图表都在下面,做这些都是本人自己写的,全部都是真是的项目中的代码,包含有柱状图.折线图.水球图以及散点图,这里直接打出来给大家练手,希望大家多多支持,如果这篇文章对您有用的话,记得收藏 数据: 链接: https://pan.baidu.com/s/1BSjLZkZ7dbsdiwPt4uPqOg 提取码: u1k

  • 使用antv替代Echarts实现数据可视化图表详解

    使用antv替代Echarts实现数据可视化图表详解

    目录 前言 面积图 常用参数文档 图表 度量 scale 提示 tooltip 坐标系 axis chart.line(options) chart.area(options) geom.position() geom.color() geom.shape() 柱状图 数据标签 label chart.coordinate() chart.interval(options) 地图 地图容器配置项 map 地图等级 viewLevel 小结 前言 技术永无止尽,多看看不同风景 周一,还在愉快的为移

  • Vue中使用Echarts可视化图表宽度自适应的完美解决方案

    Vue中使用Echarts可视化图表宽度自适应的完美解决方案

    目录 一.问题阐述: 二.解决思路: 三.最终效果: 一.问题阐述: 开发H5项目中应用到Echarts数据可视化,由于H5主要使用在手机,屏幕宽度大大限制了图表的展现,问题如下. 上图中x轴的数据是动态的,从2022年切换到2021年数据变化,此时如果x轴的数据过多就会显得格外拥挤. 二.解决思路: 我的解决方案是,在放置Echarts的容器(div)外层再套一层容器(div),外层容器宽度固定设置手机屏幕宽,并设置溢出显示滚动条(width: 100%;overflow: auto),内层E

随机推荐