django echarts饼图数据动态加载的实例

如下所示：

后台关键代码：

data = {}
#keys与values分别为该数据的键数组，值的数组。这里循环为字典添加对应键值
for k, v in zip(keys, values):
  data.update({k: v, },)
#最后将数据打包成json格式以字典的方式传送到前端
return render(request, 'index.html', {'data': json.dumps(data)})

网页（js中）取值关键代码：

1.取值：

var kv = new Array();//声明一个新的字典
kv = {{ data|safe }};//取出后台传递的数据，此处添加safe过滤避免警告
var test = new Array();//声明一个新的字典用于存放数据
for (var logKey in kv) {
//将对应键值对取出存入test，logKey 为该字典的键
  test.push({value: kv[logKey], name: logKey});
}

2.饼图赋值：

var option = {
  title: {
  show:true,
  fontSize : 15,
  text: '数据测试'
    },
  series: [{
    type: 'pie',
    radius: '55%',
    data:test,//赋值方式为字典传值
  }]
 }

效果图：

以上这篇django echarts饼图数据动态加载的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用 Django Highcharts 实现数据可视化过程解析

    使用 Django Highcharts 实现数据可视化过程解析

    概述 最近在一家公司实习,入职第一个大一点的需求是将公司开发的两个winstore app的排名信息进行可视化.大概挑选了下,排除了Flask和Echarts.最终选择使用Django和它的插件django-echarts来实现.文末有项目的完整代码,不想看的可以直接去下载,拆箱可用. 本篇博客主要用于记录整体的实现步骤,以及在实现过程中遇到的各个问题. 开发环境 本次搭建使用 Python 2.7.14,django 1.11.8,highcharts 4.0.1 直接命令行输入以下语句,即可

  • django+echart绘制曲线图的方法示例

    django+echart绘制曲线图的方法示例

    声明:请事先到官网下载echarts,另外本文引用了adminlte模板构建前台页面 views: <!-- /.row --> <div class="row"> <div class="col-xs-12"> <!-- interactive chart --> <div class="box box-primary"> <div class="box-header

  • Python 数据可视化pyecharts的使用详解

    什么是pyecharts? pyecharts 是一个用于生成 Echarts 图表的类库. echarts是百度开源的一个数据可视化 JS 库,主要用于数据可视化.pyecharts 是一个用于生成 Echarts 图表的类库.实际上就是 Echarts 与 Python 的对接. 使用 pyecharts可以生成独立的网页,也可以在 flask , Django中集成使用. pyecharts包含的图表 Bar(柱状图/条形图) Bar3D(3D 柱状图) Boxplot(箱形图) Effe

  • django echarts饼图数据动态加载的实例

    如下所示: 后台关键代码: data = {} #keys与values分别为该数据的键数组,值的数组.这里循环为字典添加对应键值 for k, v in zip(keys, values): data.update({k: v, },) #最后将数据打包成json格式以字典的方式传送到前端 return render(request, 'index.html', {'data': json.dumps(data)}) 网页(js中)取值关键代码: 1.取值: var kv = new Arra

  • Android实现ListView数据动态加载的方法

    本文实例讲述了Android实现ListView数据动态加载的方法.分享给大家供大家参考,具体如下: list.setOnScrollListener(new OnScrollListener() { //添加滚动条滚到最底部,加载余下的元素 public void onScrollStateChanged(AbsListView view, int scrollState) { // if (scrollState == OnScrollListener.SCROLL_STATE_IDLE)

  • 利用js将ajax获取到的后台数据动态加载至网页中的方法

    动态生成二级菜单树: <script> jQuery(function($) { /********** 获取未处理报警信息总数 **************/ var result; $.ajax({ async:false, cache:false, url: "alarm_findPageAlarm.do",//访问后台接口取数据 // dataType : "json", type: 'POST', success: function(data)

  • Python pkg_resources模块动态加载插件实例分析

    Python pkg_resources模块动态加载插件实例分析

    使用标准库importlib的import_module()函数.django的import_string(),它们都可以动态加载指定的 Python 模块. 举两个动态加载例子: 举例一: 在你项目中有个test函数,位于your_project/demo/test.py中,那么你可以使用import_module来动态加载并调用这个函数而不需要在使用的地方通过import导入. module_path = 'your_project/demo' module = import_module(

  • PyQt5主窗口动态加载Widget实例代码

    PyQt5主窗口动态加载Widget实例代码

    本文研究的主要是PyQt5主窗口动态加载Widget的代码示例,具体如下. 我们通过Qt Designer设计两个窗口,命名为主窗口(MainForm)和子窗口(ChildrenForm).我们在主窗口的空白中央添加一个栅格布局并命名为MaingridLayout,等会需要将ChildrenForm放进去. 编写代码 from PyQt5 import QtWidgets from MainForm import Ui_MainForm from Children import Ui_Form

  • Android编程动态加载布局实例详解【附demo源码】

    Android编程动态加载布局实例详解【附demo源码】

    本文实例讲述了Android编程动态加载布局的方法.分享给大家供大家参考,具体如下: 由于前段时间项目需要,需要在一个页面上加载根据不同的按钮加载不同的布局页面,当时想到用 tabhot .不过美工提供的界面图完全用不上tabhot ,所以想到了动态加载的方法来解决这一需求.在这里我整理了一下,写了一个 DEMO 希望大家以后少走点弯路. 首先,我们先把界面的框架图画出来,示意图如下: 中间白色部门是一个线性布局文件,我喜欢在画图的时候用不同的颜色将一块布局标示出来,方便查看.布局文件代码如下:

  • AJAX 动态加载后台数据 绑定select的方法

    直接上代码 是可以用的,后台代码我就不贴了,我相信后台代码大家都会,直接返回json数据,我是前端比较差的,所以喜欢把每次不会的全部记起来 html代码 <select id="select" style="width : 80px;height : 30px;"> //下拉框数据动态加载 </select> js代码 $.ajax({ url: "", //后台webservice里的方法名称 contentType:

  • jQuery zTree树插件动态加载实例代码

    需求: 由于项目中家谱图数据量超大,而一般加载方式是通过,页面加载时 zTree.init方法进行数据加载,将所有数据一次性加载到页面中.而在项目中家谱级别又非常广而深,成千上万级,因此一次加载,完全加载不出来.于是需要进行优化为动态加载(增量加载)的方式,以便数据加载,提高体验度. 解决断路: 这应该好办,只要找到父节点单击事件,然后进行数据加载,结点附加即可.时间紧,任务重,完全没给研究的时间.只能硬着上,随便搜索一个"zTree动态加载",出是出来了,标题也对,可里面的代码根本没

  • 解决layui动态加载复选框无法选中的问题

    问题描述 1.最近用layui做后台界面,遇到layui跟ajax数据动态加载的checkbox,偶尔不能正常勾选,取消 2.有分页时,最后一页数据过少会导致其他页下方数据无法选中 3.页面没加载完或暴力测试时也会不能选中 利用layui更新渲染方法和网上的一些方法去解决后极大的减少了无法选中的情况,但是暴力测试时偶尔还会出现,实在不知道什么原因,所以就用了一个折中的方法--自己写一个复选框 <!--原有layui复选框--> <td> <div class="la

  • vue+element实现动态加载表单

    vue+element实现动态加载表单

    本文实例为大家分享了vue+element实现动态加载表单的具体代码,供大家参考,具体内容如下 一.问卷动态加载表单 //html <el-form :model="quesPaper" status-icon label-width="100px" label-position="top" size="small" v-loading="paperLoading" > <el-form-

随机推荐