[Feature] Parse SSR-generated chart from SVG to EchartsType on client

qacovj5a  于 5个月前  发布在  Echarts
关注(0)|答案(6)|浏览(59)

What problem does this feature solve?

The sandbox here coming from the following page documentation shows that we have to re-render a chart on client side with its data to add some interactivity on it (like tooltip).

I would like to generate a chart on server-side (svg output), render it, and add some options on client-side (like tooltip for example) without creating a new graph.

What does the proposed API look like?

I suggest using a "parseSVG" or "parseSVGToEcharts" function which takes in input a stringified svg or inline svg and converts it to an EchartsType.

In that way, we could set options to this svg and render it on client :

const svgString = data.svgChart; // the generated svg chart coming from the server
const myChart = parseSvg(svgString) 

myChart.setOption({
	title: {
		text: 'YEAH'
	}
})
vnjpjtjt

vnjpjtjt1#

...we could set options to this svg and render it on client

Final myChart.setOption is client-rendering. Wouldn't that make SSR meaningless ? Server could just send partial XML option instead of SVG.

s6fujrry

s6fujrry2#

In fact I don't want to pass data series directly in the client. That's why generating a svg from the server and making it interactive on the client can be very useful for me.

3mpgtkmj

3mpgtkmj3#

I don't want to pass data series directly in the client.

Understandable if this is for security reasons, but data will still be exposed after parsing:
const myChart = parseSvg(svgString); op = myChart.getOption(); console.log(op.series[0].data);

qybjjes1

qybjjes14#

Yes you're right for sure. But a bit more complicated to scrape I think.
Because I run a svelte kit application that shows all the data coming from the server in network tab, so I thought about sending only the generated chart from the server to the client instead of sending the data.
And make the chart interactive then.

kkbh8khc

kkbh8khc5#

I don't understand how do you think it should provide the ability of tooltip if it were not rendered on the client side?

9udxz4iz

9udxz4iz6#

I want to render it on the client side (mandatory for displaying the tooltip). But instead of receiving options from the server (including data that can be accessed directly on the API endpoint), I would prefer to :

on server-side

  • generate first an svg echarts on the server-side
  • send it to the client

on client-side

  • parse the svg received and convert it as an echarts object in client
  • add options to this chart (like tooltip)
  • render the chart

With this process, the data is a bit more complicated to access in my case (request my-endoint/__data.json will return an svg instead of options with data).

My main point with this issue is to add the ability to convert a svg to an echarts instance on the client side.

相关问题