将 Python 数据结构转换为 JavaScript，包括函数答案

【问题标题】：Converting Python data structures to JavaScript, including functions将 Python 数据结构转换为 JavaScript，包括函数
【发布时间】：2015-10-14 05:39:12
【问题描述】：

我正在使用 C3.js 为我的 Django 应用程序创建图表。在我的 Django 模板中，我有一个这样的 JavaScript sn-p：

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

在视图中，我使用 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 不支持表示函数，并且在Python dict 中添加'onclick': 'function (d, i) { ... };' 只会在JSON 编码时产生一个字符串。尝试继承 json.JSONEncoder 似乎没有结果，因为我需要输出的不是有效的 JSON，而是实际的 JavaScript。

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

【问题讨论】：

标签： python json django c3.js

【解决方案1】：

经过反思，我认为我要问的是一个以错误方式解决问题的案例，或者using the wrong tools to solve the problem。

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

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

没有特殊原因我需要在 Django 视图代码中进行配置设置。有了这个认识，我可以将配置（包括我想添加的有问题的“onclick”JavaScript 函数）移动到模板中，并将数据注入到单独的变量中。

模板是：

<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 的 Model-View-Template 设计。

【讨论】：