将django后台数组搬到js前台

            // JS 代码 
            var chart = Highcharts.chart('container', {
                chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                },
                title: {
                        text: '扇区突出演示'
                },
                tooltip: {
                        headerFormat: '{series.name}<br>',
                        pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                        pie: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                dataLabels: {
                                        enabled: true,
                                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                        style: {
                                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                        }
                                },
                                states: {
                                        hover: {
                                                enabled: false
                                        }  
                                },
                                slicedOffset: 20,         // 突出间距
                                point: {                  // 每个扇区是数据点对象，所以事件应该写在 point 下面
                                        events: {
                                                // 鼠标滑过是，突出当前扇区
                                                mouseOver: function() {
                                                        this.slice();
                                                },
                                                // 鼠标移出时，收回突出显示
                                                mouseOut: function() {
                                                        this.slice();
                                                },
                                                // 默认是点击突出，这里屏蔽掉
                                                click: function() {
                                                        console.log(this);
                                                        return false;
                                                }
                                        }
                                }
                        }
                },
                series: [{
                        type: 'pie',
                        name: '区县占比',
                        data: {{ array1 | safe }}
                }]
            });

最后一句中：

{{ array1 | safe }}

从这里来：

def piedata(request):
    array1 = [['通化县', 1], ['集安', 1], ['梅河', 2], ['柳河', 3], ['城区', 9]]
    context = {'array1': array1} # context数据字典中的key——'array1'就是传递给js的array1 
    return render(request, "pie_chart.html", context)

context数据字典中的key——'array1'就是传递给js的array1，safe表示不转码，避免将引号转为转义字符。

https://docs.djangoproject.com/zh-hans/2.1/intro/tutorial03/#write-views-that-actually-do-something

官方文档例子不是很明显。是在循环中传递的数组。

{% for question in latest_question_list %}

https://blog.csdn.net/watermelonbig/article/details/53946218

为什么需要使用{{ fileuri_json|safe }}这样的形式？
Django的模板中会对HTML标签和JS等语法标签进行自动转义，原因显而易见，这样是为了安全。然后上面的"|safe"的作用正是关闭Django的自动转义功能。
如果不做这个干预，可以运行下面代码观察下效果：
<script>
alert('{{ fileuri_json }}')
</script>
这是页面弹出的窗口内容：
["/data/server/config/utf8.users", "/data/server/config/important.properties"]

可以看到，Django把fileuri_json中的双引号全部转义了。
如果拿这个被转义后的字符串交给页面js去当数组处理，肯定是无法实现的。
---------------------
作者：运维个西瓜
来源：CSDN
原文：https://blog.csdn.net/watermelonbig/article/details/53946218?utm_source=copy
版权声明：本文为博主原创文章，转载请附上博文链接！

将django后台数组搬到js前台

猜你喜欢