Django前端与后台数据交互:用json传输数据到javascript来画hichart图表

本文介绍了如何在Django项目中将后台数据以JSON格式传输到前端JavaScript,以便使用HiChart库绘制图表。由于JavaScript代码通常位于独立的JS文件中,而不是直接在HTML中,因此需要特殊处理。通过修改JS文件接收来自Django视图的JSON数据,实现了数据的顺利交互。示例中展示了如何处理多个饼图的系列数据。在views.py中,字典数据被转换为JSON格式并传给前端。在HTML中,使用内联JavaScript接收并传递给JS文件。
摘要由CSDN通过智能技术生成

前端和后台的数据传输是个很重要的环节.项目需要把数据用hichart显示出来,就涉及到Django后台传输数据到javascript的问题.
因为图表比较多,javascript部分写到单独的js文件里,不写在html文件里,在html中调用js文件.
网上找到的很多教程,博客都我有启发,但是没有完全符合我的情况.模板语言{ { }}在html文件中可以使用,但写在js文件中则会报错,而网上的教程都是把javascript直接写在html文件里的,因此自己摸索了一段时间,终于学会了怎么传数据给前端了.也有了解过ajax和JsonResponse,需要修改很多前端小伙伴写的代码,而且暂时项目的这部分不需要,因此还没有尝试,以后会继续学习.

以下是实现的过程,以画两个饼图作为例子,希望展示得算是比较易懂吧~
*以下代码都是例子化,而且只截取最重要部分.*

原piechart.js文件中:

$(document).ready(function(){
   
   var chart = {    
      backgroundColor: 'rgba(255, 255, 255, 0)',
      plotBorderColor : null,
      plotBackgroundColor: null,
      plotBackgroundImage:null,
      plotBorderWidth: null,
      plotShadow: false,  
   };
.......(省略啦)
var series= [{
      type: 'pie',
      name: '占比',
      data: [
         ['a',
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值