無法在 vue-chartjs 上動態渲染我的圖表

Question

我定義了我的圖表如下（MainChart.vue）。

import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
// const brandPrimary = '#20a8d8'
export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ['options', 'chartData', 'height'],
  mounted () {
    this.renderChart(this.chartData, this.options)
    var elements = 1
  }
}

我測試了這段代碼並確認它運行良好。

<line-chart :chartData="myChartData"></line-chart>

但是，我嘗試動態渲染圖表，但它不起作用。

import lineChart from './MainChart';

// ...

let chartClass = Vue.extend(lineChart)
let chartInstance = new chartClass({
  propsData: {
    chartData: myChartData
  }
})
chartInstance.$mount()
console.log(chartInstance.$el)
console.log(chartInstance.$el.querySelector("canvas").toDataURL('image/png'))
console.log(chartInstance.$refs.canvas)
console.log(chartInstance.$refs.canvas.toDataURL('image/png'))

控制台消息：

我從控制台檢查，發現畫布區域沒有繪制任何內容。

如何動態渲染我的圖表？

類似問題：

• 是否可以使用 vue-chartjs 打印圖表？

Answer 1

要獲得完整的圖像數據，您必須等到圖表完成。 使用“承諾”是有幫助的。

 async function addChart(d, i, w, h) {
  var canvas = document.createElement("canvas")
  canvas.width = 765
  canvas.height = 382
  //canvas.style.width = "765px"
  //canvas.style.height = "382px"
  //canvas.style.display = "none"
  canvas.id = "dynamicChart"
  document.body.appendChild(canvas)

  var ctx = document.getElementById("dynamicChart").getContext('2d');
  var draw = () => new Promise((resolve, reject) => {
   new Chart(ctx, {
    type: 'bar',
    data: d,
    options: {
     responsive: false
    }
   })
   setTimeout(() => resolve(), 100)
  })

  await draw()

  let imageData = document.getElementById("dynamicChart").toDataURL("image/png")
  console.log(imageData)

  addImage(imageData, i, w, h)
  document.body.removeChild(canvas)
 }

 // ...

 await addChart(myChartData, 0, 400, 300)

如果你想在循環中繪制多個圖表，試試這個：

let chartFunctions = []
myList.forEach((item) => {
  chartFunctions.push(async function() {
    await addChart(myChartData, 3, 160, 80)
  })
}

for(let k in chartFunctions) {
  await chartFunctions[k]()
}

控制台消息：