python - 将 Python 数据结构转换为 JavaScript，包括函数

Question

我正在使用 C3.js 为我的 Django 应用程序创建图表。在我的 Django 模板中，我有一个像这样的 JavaScript 片段:

<script>
var chart = c3.generate({{ chart_data|safe }});
</script>

在 View 中，我使用 Python 数据结构设置图表，该数据结构在由模板呈现之前转换为 JSON:

chart = {
    'bindto': '#chart',
    'data': {
        'columns': [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ]
    }
}
return render_to_response('chart.html', {'chart_data': json.dumps(chart)})

效果很好，我得到类似 this example 的信息.

对于更复杂的 C3 图表，我需要能够在 c3.generate 的参数中包含 JavaScript 函数。 (例如 this donut chart 中的 onclick 值。)但是 JSON 不支持表示函数，并添加 'onclick': 'function (d, i) { ... }; ' 到 Python 字典在 JSON 编码时只会产生一个字符串。尝试子类化 json.JSONEncoder 似乎没有结果，因为我需要输出的不是有效的 JSON，而是实际的 JavaScript。

有没有一种巧妙的方法可以做到这一点？目前我正在做一个笨拙的解决方法，将 JavaScript 函数代码插入到 json.dumps() 的结果中。

Answer 1

经过反射(reflection)，我认为我所问的是一种以错误的方式处理问题的情况，或者 using the wrong tools to solve the problem .

提供给c3.generate()的数据结构包含两件事:

1. 数据结构和图表外观的配置，以及
2. 要在图表中呈现的实际数据。

没有什么特殊原因我需要在 Django View 代码中进行配置设置。有了这种认识，我可以将配置(包括我想要添加的有问题的“onclick”JavaScript 函数)移至模板，并将数据注入(inject)到单独的变量中。

模板将是:

<script>
var columns = {{ chart_columns|safe }};
var chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: columns,
      onclick: function (d, i) { /* ... */ }
    }
});
</script>

查看代码:

chart = [
    ['data1', 30, 200, 100, 400, 150, 250],
    ['data2', 50, 20, 10, 40, 15, 25]
]
return render_to_response('chart.html', {'chart_columns': json.dumps(chart)})

除了解决我的问题之外，这更适合 Django 的模型- View -模板设计。