V
V
vik_kap2018-04-03 22:06:38
JavaScript
vik_kap, 2018-04-03 22:06:38

How to output data from Highstock (from highcharts) to Vue?

There is a very strange problem.
There is a set of data for the chart (options), usually they include title, series, and so on.
I made a component on vue that takes options and typeChart (constructor type) from the parent component and initializes the chart -

this.chart = Highcharts[this.typeChart](this.$el, this.options)

I need two types of chart builder - .chart and .stockChart. And this is where the little problem starts.
The fact is that if you create a chart through .chart:
this.chart = Highcharts.chart(this.$el, this.options)

then in the parent component, I can easily see the data of this chart (in mounted, for example, by writing But if you select the .stockChart constructor, then this.options.series is generally null. I need to change through the parent component (that is, through setData it will not work), but this is only possible with the chart constructor, which is strange :) I hope I explained it clearly :) console.log(this.options.series[0].data))
this.options.series[0].data

Answer the question

In order to leave comments, you need to log in

1 answer(s)
N
Nikita Velko, 2018-04-04
@vik_kap

So, well, firstly, if you have this.options.series = null, then the chart itself has nothing to do with it. It turns out that somewhere you do not write the value to the props or in some other place there is an error (which is difficult to understand, because you did not give an example).
Secondly, do I understand correctly that you pass the series to the chart through props, and then in the chart component itself this.$parentyou want to change these same props so that they are updated and thrown again into this component? O_o Don't you think you're doing something wrong?
And thirdly, my advice to you: when working with highchart in vue, it's better to do everything at once inside the chart component. Advantages of this approach: no watchers, direct access to the chart instance, there will be no inconsistencies between the series in the props and in the chart itself (because it will not always be equal tothis.options.series[0]instance.series[0]). At first, I myself threw everything into the chart through props, so that the component of the type was universal. As a result, when the functionality grew several times, it became very difficult to handle all this, plus there were memory drawdowns.
Well, create an example at least on the same http://jsfiddle.net, so that you can actually help.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question