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

最新推荐文章于 2025-08-12 13:51:59 发布

ycisacat

最新推荐文章于 2025-08-12 13:51:59 发布

阅读量1.5w

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript django 数据 hichart json

本文链接：https://blog.youkuaiyun.com/ycisacat/article/details/50530377

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

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

前端和后台的数据传输是个很重要的环节.项目需要把数据用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',12],
         ['b',22],
         ['c',32],
         ['d',42]      
      ]
   }];

   var json = {};
   json.chart = chart; //chart等部分设定好后是不需要修改的
   json.series = series1; //series是传入数据的部分
   $('#oPie').highcharts(json);
});

hichart图表的javascript类似如上,有好几个需要设置的参数,其中series是传入数据的部分,其他都可以在javascript中书写好.
series以这种方式书写没法从后台传入数据,修改后,把var series部分去掉,json.series部分保留,其他不变.有多个图,每个图的js文件里都是如此.
在第二个图中:json.series = series2.其他类似.

views.py中:

def json_data(self):
        pie_series1={
      'type': 'pie',
      'name': '占比',
      'data': [
         ['a',12],
         ['b',22],
         ['c',32],
         ['d',42]
      ]
    }
        pie_series2={
      'type': 'pie',
      'name': '占比',
      'data': [
         ['a',12],
         ['b',22],
         ['c',32],
         ['d',42]
      ]
    }
        data1=json.dumps(pie_series,separators=(',',':'))
        data2=json.dumps(pie_series,separators=(',',':'))
        return render(request, 'index.html',{'Series1':data1,'Series2':data2})

该方法为直接在views中渲染,数据为字典格式,在传输前需要先转为json格式,用json.dumps方法,separators用于压缩空格以减小传输的数据的大小.若图表很多,可以另外写一个类去打包数据.

html文件中:

......
<script src="../static/js/jquery-1.10.1.min.js"></script>
<script src="../static/js/highcharts.js"></script>
<script language="JavaScript" src="../static/drawjs/piechart1.js"></script>
<script language="JavaScript" src="../static/drawjs/piechart2.js"></script>
<script type="application/javascript">
    var series1=[{{ Series1|safe }}];
    var series2=[{{ Series2|safe }}];
</script>
......