无法在 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]()
}

控制台消息：