Django Chart.js ajax javascript“字符串数据解析错误”答案

【问题标题】：Django Chart.js ajax javascript "string data parsing error"Django Chart.js ajax javascript“字符串数据解析错误”
【发布时间】：2019-05-12 23:43:56
【问题描述】：

我正在通过 Django 和 Chart.js 创建图表网页（在 Django 的 views.py 中）

class ChartView(TemplateView):
    template_name = 'graph.html'

    def get_context_data(self, **kwargs):
        context = super(ChartView, self).get_context_data(**kwargs)
        context['labels'] = ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
        context['datas'] = [12, 19, 3, 5, 2, 3]
        return context

在html文件中（模板文件）

<script>
$( document ).ready(function() {
var data = {
    labels: {{ labels }},
    datasets: [
        {
            label: "Site Registrations in the Last 30 Days",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: {{ datas }}
        }
    ]
};
var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx).Line(data);
});
</script>

html 页面渲染有错误。（页面源码是这样的）

<script>
$( document ).ready(function() {
var data = {
    labels: [u&#39;Red&#39;, u&#39;Blue&#39;, u&#39;Yellow&#39;, u&#39;Green&#39;, u&#39;Purple&#39;, u&#39;Orange&#39;],
    datasets: [
        {
            label: "Site Registrations in the Last 30 Days",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [12, 19, 3, 5, 2, 3]
        }
    ]
};
var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx).Line(data);
});
</script>

很明显，您可以看到 data : {{ datas }} 得到了正确的值。但是，标签：{{标签}}得到了错误的值。我不明白如何解析 Ajax/javascript 中的字符串？请让我知道如何正确地做到这一点。谢谢。

【问题讨论】：

标签： javascript ajax django chart.js

【解决方案1】：

与其尝试将整个标签列表直接输出为 Javascript 数组，不如从列表中构建一个 Javascript 数组：

var data = {
    labels: [{% for label in labels %}"{{ label }}", {% endfor %}],
...

【讨论】：

【解决方案2】：

您必须使用safe 模板过滤器。

safe 将字符串标记为在输出之前不需要进一步的 HTML 转义。

例子：

{{ labels|safe }}

【讨论】：

使用 safe 后，这是渲染标签：[u'Red', u'Blue', u'Yellow', u'Green', u'Purple', u'Orange']。但是，我想渲染标签：[“Red”、“Blue”、“Yellow”、“Green”、“Purple”、“Orange”]。请让我知道该怎么做。谢谢
你用的是什么python版本？
Python 2.7.10 和 Django==1.11.16
我无法在我的系统上重现它。您可以尝试通过将列表转换为 json 来修复它：json.dumps(["Red", "Blue", "Yellow", "Green", "Purple", "Orange"])。在此之前导入 json。

【解决方案3】：

感谢您的建议。我刚从

   python 2.7 to python 3.7

效果很好。

【讨论】：