Как вывести данные с Highstock (из highcharts) на Vue?

Question

[vik_kap]

Есть набор данных для графика (options), обычно они включают себя title, series и т.д.

Сделала компонент на vue, который принимает с родительского компонента options и typeChart (тип конструктора) и инициализирует график -

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

Мне нужны два типа конструктора графиков - .chart и .stockChart. И вот здесь начинается небольшая проблема.

Дело в том, что если создать график через .chart:

this.chart = Highcharts.chart(this.$el, this.options)

то в родительском компоненте я спокойно могу посмотреть данные этого графика (в mounted например, прописав console.log(this.options.series[0].data))

Но если выбрать конструктор .stockChart, то this.options.series вообще равен null.
Мне необходимо менять this.options.series[0].data через родительский компонент (то есть через setData не получится), но это возможно только при конструкторе chart, что странно.

Answer 1

[Nikita Velko]

Так, ну во-первых, если у вас this.options.series = null, то сам чарт тут не причем. Получается у вас где-то не записывается значение в пропс или в каком-то другом месте ошибка (что сложно понять, ибо вы не привели пример).
Во-вторых, я правильно понимаю, что вы прокидываете серии в чарт через пропсы, а потом в самом компоненте чарта через this.$parent хотите поменять эти самые пропсы, чтобы они обновились и прокинулись опять же в этот компонент? О_о Вам не кажется, что вы делаете что-то не так?
Ну и в-третьих, мой вам совет: при работе с highchart'ом в vue лучше делайте все сразу внутри компонента графика. Плюсы такого подхода: никаких вотчеров, прямой доступ к инстансу графика, не будет несоответствий между сериями в пропсах и в самом чарте (ибо далеко не всегда this.options.series[0] будет равен instance.series[0]). Я сам сначала все в график кидал через пропсы, чтоб компонент типа универсальный был. В итоге когда функционал вырос в несколько раз, все это стало очень сложно хендлить, плюс пошли просадки по памяти.
Ну и создайте пример хоть на том же http://jsfiddle.net, чтоб можно было вам помочь на деле.

Comments

[vik_kap]

Спасибо, я вас поняла, думаю так и буду делать

Если что, не через this.$parent, а в самом родительском компоненте есть функции изменяющие options :)