// 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
版权声明:本文为博主原创文章,转载请附上博文链接!