TypeError: klass.fromObject is not a function when using fabric.Chart in Fabric.js with Echarts

89 views Asked by At

I'm trying to integrate Apache Echarts into my Fabric.js project and came across echarts-fabric, which seems promising.

Here's how I'm adding a fabric.Chart to my Fabric.js canvas:

import { fabric } from 'fabric'
import { install } from 'echarts-fabric'
install(fabric)

object.value = new fabric.Chart({
  width: 600,
  height: 450,
  option,
  theme: 'dark'
})

if (canvas && canvas.value) {
  canvas.value.add(object.value)
  canvas.value.renderAll()
}

enter image description here

However, when I attempt to transform canvas data to JSON and then use loadFromJSON(), I encounter the following error:

TypeError: klass.fromObject is not a function

I've tried setting the fromObject method for the fabric.Chart, but it doesn't seem to work as expected:

canvas.value = new fabric.Canvas(domCanvas.value, {
  width: 1024,
  height: 600,
  backgroundColor: '#CBCBCB'
})

fabric.Chart.fromObject = (object: any, callback: any) => {
  const chart = new fabric.Chart(object.option)
  chart.set('option', object.option)
  chart.set('theme', object.theme)
  callback(chart)
}

canvas.value.loadFromJSON(canvasData[0].canvas, () => {
  canvas.value?.renderAll()
})

I'd greatly appreciate any help or insights on how to resolve this issue and make the fabric.Chart work seamlessly with Echarts in Fabric.js. Thank you for your assistance!

0

There are 0 answers