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()
}
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!