如何解决如何在图表js
我有这张图表(如下图)
let ctx1 = document.getElementById("myChart").getContext('2d');
let labels = ['Banking','Finances','Shopping','Recreation','Healthcare','Transportation','Food and Drink'];
let colorHex = ['#FB3640','#86A9C5','#286CA1','#77FAC','#1C203D','#798E9C','#2A303D'];
let myChart = new Chart(ctx1,{
type: 'pie',data: {
datasets: [{
data: [10,10,10],backgroundColor: colorHex,borderWidth: [0,0]
}],labels: labels,},options: {
responsive: false,legend: {
position: 'bottom',labels: {
fontColor: 'white'
}
},plugins: {
datalabels: {
color: '#fff',anchor: 'end',align: 'start',offset: 10,borderWidth: 0,// borderColor: '#fff',borderRadius: 0,font: {
size: '10',color: '#fff'
},formatter: (value) => {
return value + ' %';
}
}
}
}
})
我是通过html调用的(如下图)
<canvas id= "myChart" height="330%" width="330%"></canvas>
我想做的事情是在 JS 的 data 属性中传递变量 - 从我的 Flask 后端传递,以便图表显示的值会改变。
我该怎么做?
谢谢
解决方法
如果你没有在外部使用 javascript,那么你可以将 Flask 的变量传递给 Template 查看然后在查看 html 中,您可以直接在 javascript 中使用,如下所示:
data: {
datasets: [{
data: {{ chartData | tojson }},//chartData variable is passed From flask to view template
backgroundColor: colorHex,borderWidth: [0,0]
}],labels: labels,},
这里的 chartData
是从 Flask 传递给 View html 的变量,它的值类似于
chartData = [10,12,11,10,11]
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。