Ошибка Highcharts # 17 (Vue.js), в столбце

Question

Я пытаюсь отобразить диаграмму столбцов в приложении Vue.js, используя Highcharts, но я получаю ошибку Highcharts # 17 (запрошенный тип серии не существует).

Я установил highcharts@6.1.4, highcharts-vue@1.2.0 и jquery@3.3.1 через npm.

Вот мой импорт:

import HighchartsVue from 'highcharts-vue'
import Highcharts from 'highcharts'
import HighchartsMore from 'highcharts/highcharts-more'

HighchartsMore(Highcharts)

Vue.use(HighchartsVue)

А вот фрагмент моей диаграммы:

let div_id = 'chart_' + id;
let chart = {
    renderTo: div_id,
    type: 'columnrange',
    zoomType: 'xy',
    inverted: true
};
let title = 'Chart Title';

...

$('#charts').append('<div id="' + div_id + '"></div>');
let display_chart = new Highcharts.Chart({
    chart: chart,
    title: title,
    ....
});

Я ожидаю увидеть диаграмму столбцов, но вместо этого вижу ошибку Highcharts # 17 (запрошенный тип серии не существует), несмотря на импорт highcharts-more.

Когда я заменяю диаграмму столбцов на обычную линейную диаграмму, все работает просто отлично.

Обновление: Смущающе, я обнаружил свою проблему. «columnrage» на самом деле не то же самое, что «columnrange». Я не знаю, кому можно доверять правильный ответ, потому что, вероятно, представленный был вызван моей собственной опечаткой, которую я пропускал снова и снова.

Спасибо всем за помощь!

Answer 1

Попробуйте изменить порядок импорта следующим образом:

// Highcharts 1st
import Highcharts from 'highcharts';

// then all Highcharts modules you will need
import HighchartsMore from 'highcharts/highcharts-more';
HighchartsMore(Highcharts);
import dataModule from 'highcharts/modules/data';
dataModule(Highcharts);
...

// finally the Vue wrapper
import HighchartsVue from 'highcharts-vue';
Vue.use(HighchartsVue);

Answer 2

Посмотрите на пример ниже, вы должны инициализировать ваши данные, используя среду Vue. Диаграмма смонтирована внутри вашего компонента. Вам может не понадобиться jquery здесь.

Vue.use(HighchartsVue.default)

var app = new Vue({
  el: "#app",
  data() {
    return {
      chartOptions: {
        chart: {
          type: 'spline'
        },
        title: {
          text: 'Series'
        },
        series: [{
          data: [1,5,6,7]
        }]
      },
      dataSeries: '1,5,6,7'
    }
  },
  watch: {
    dataSeries(newValue) {
      if (newValue) {
        this.chartOptions.series[0].data = newValue.split(',').map(a => Number(a))
      }

    }
  }
})

.title-row {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hchart {
    height: 100%;
    width: 100%;
    position: absolute;
}
body,html {
 margin: 0;
 padding: 0;
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts-more.js"></script>

<script type="text/javascript" src="https://cdn.rawgit.com/highcharts/highcharts-vue/1ce7e656/dist/script-tag/highcharts-vue.min.js"></script>


<div id="app">
  <div class="title-row">
    <p>Insert data series, comma separated</p>
    <input type="text" v-model="dataSeries">
  </div>
    <highcharts class="hchart":options="chartOptions"></highcharts>
</div>