如何在圖表js中將變量從flask傳遞到外部javascript

Question

我有這張圖表（如下圖）

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 中的數據屬性中傳遞變量 - 從我在 flask 的后端，以便圖表顯示的值會發生變化。

我該怎么做呢？

謝謝

Answer 1

如果您沒有在外部使用 javascript，那么您可以將 Flask 的變量傳遞給模板視圖，然后在視圖 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]