时间戳

首页 > 解决方案 > 如何在图表js中将变量从烧瓶传递到外部javascript

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

问题描述

我有这张图表（如下图）

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

我该怎么做呢？

谢谢

标签： javascripthtmlcsshtml5-canvas

解决方案

如果您没有在外部使用 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]

推荐阅读