如何通过simple_tag向Django模板传递Echarts图表数据？

嘿，我来帮你搞定用Django自定义模板标签给ECharts传递数据的问题！

首先，先理清楚核心：你用render能正常传数据，但带takes_context=True的自定义simple_tag没生效，大概率是数据传递的姿势不对。我给你一步步拆解正确的做法：

1. 正确编写自定义模板标签 #

在你的app的templatetags目录下（如果没有就新建一个，记得加__init__.py空文件），创建一个标签文件比如echart_tags.py，代码如下：

from django import template
import json

register = template.Library()

@register.simple_tag(takes_context=True)
def get_echart_data(context):
    # 两种数据获取方式任选：
    # 方式一：从context里拿视图传递过来的数据（比如render时传的变量）
    # raw_data = context.get('your_view_data')
    # 再基于raw_data生成ECharts需要的配置格式

    # 方式二：直接在标签里生成/查询数据（比如从数据库取统计数据）
    chart_option = {
        'xAxis': {'type': 'category', 'data': ['周一', '周二', '周三', '周四', '周五']},
        'yAxis': {'type': 'value'},
        'series': [{'data': [120, 200, 150, 80, 220], 'type': 'bar'}]
    }
    # 必须转成JSON字符串，不然模板渲染后ECharts识别不了
    return json.dumps(chart_option)

2. 模板里正确调用标签 #

首先要在模板开头加载你的标签库，然后在ECharts初始化代码里使用标签，记得加|safe过滤器防止Django转义JSON格式：

{% load echart_tags %} <!-- 先加载标签库，文件名就是echart_tags -->

<div id="my_chart" style="width: 800px; height: 500px;"></div>

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script>
var chartDom = document.getElementById('my_chart');
var myChart = echarts.init(chartDom);
// 调用标签获取JSON数据，加safe避免转义破坏格式
var option = {{ get_echart_data|safe }};
myChart.setOption(option);
</script>

3. 排查常见坑点 #

• 忘记加载标签库：模板开头一定要加{% load echart_tags %}，不然标签会被当成普通文本输出，完全不生效
• 没转JSON字符串：直接返回Python字典的话，Django会把它转成类似{'xAxis': ...}的字符串，ECharts无法解析，必须用json.dumps()转成标准JSON格式
• 没加safe过滤器：Django默认会转义HTML特殊字符，导致JSON里的引号被转成"，直接破坏配置格式，所以必须加|safe
• context数据获取错误：如果是从视图传数据到context，要确保标签里context.get('key')的key和render时传的一致，比如视图里render(request, 'xxx.html', {'user_data': data})，标签里就用context.get('user_data')

对比你的可行方案 #

你用render时是直接把序列化后的JSON传到模板，自定义标签的本质是把“生成/序列化数据”的逻辑从视图移到了标签里，这样可以在多个模板里复用这个标签，不用每次都在视图里重复写数据逻辑。

比如你的可行视图大概是这样：

def my_view(request):
    chart_data = json.dumps(your_echart_option)
    return render(request, 'chart.html', {'chart_data': chart_data})

模板里{{ chart_data|safe }}，而自定义标签只是把chart_data的生成逻辑封装到了标签中，复用性更强。

内容的提问来源于stack exchange，提问作者bummm26