如何在图表js中将变量从烧瓶传递到外部javascript答案

【问题标题】：How to pass variables from flask to external javascript in chart js如何在图表js中将变量从烧瓶传递到外部javascript
【发布时间】：2021-04-11 14:12:36
【问题描述】：

我有这张图表（如下图）

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, 10, 10, 10, 10],
      backgroundColor: colorHex,
      borderWidth: [0,0,0,0,0,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 属性中传递变量 - 从我在烧瓶中的后端，以便图表显示的值会发生变化。

我该怎么做？

谢谢

【问题讨论】：

我在this answer 中实现了类似的东西，这可能会对你有所帮助。

标签： javascript html css html5-canvas

【解决方案1】：

如果您没有在外部使用 javascript，那么您可以将 Flask 的变量传递给 Template 查看，然后在查看 html 中，您可以直接在 javascript 中使用，如下所示：

data: {
    datasets: [{
      data: {{ chartData | tojson }}, //chartData variable is passed From flask to view template
      backgroundColor: colorHex,
      borderWidth: [0,0,0,0,0,0,0]
    }],
    labels: labels,
  
  },

这里 chartData 是从 Flask 传递到 View html 的变量，它的值类似于

chartData = [10, 12, 11, 12, 10, 12, 11]

【讨论】：