Highcharts 错误 #17 (Vue.js)，在 columnrange 系列中答案

【问题标题】：Highcharts Error #17 (Vue.js), in columnrange seriesHighcharts 错误 #17 (Vue.js)，在 columnrange 系列中
【发布时间】：2019-01-08 19:39:04
【问题描述】：

我正在尝试使用 Highcharts 在 Vue.js 应用程序中显示柱形图，但出现 Highcharts 错误 #17（请求的系列类型不存在）。

我已经通过 npm 安装了 highcharts@6.1.4、highcharts-vue@1.2.0 和 jquery@3.3.1。

这是我的导入：

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

HighchartsMore(Highcharts)

Vue.use(HighchartsVue)

这是我图表的 sn-p：

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。

当我用常规折线图替换柱形图时，一切正常。

更新：尴尬的是，我发现了我的问题。实际上，“列范围”与“列范围”不同。我不知道应该把正确答案归功于谁，因为可能出现的问题是我自己的印刷错误造成的，我一遍又一遍地错过了。

谢谢大家的帮助！

【问题讨论】：

你是如何初始化和使用 Vue 的？不知道为什么要使用 jquery 进行选择，使用 Vuejs 时可能不需要 jquery
当你问我如何初始化和使用 Vue 时，我不确定你的意思。至于 jquery，最终的意图是根据用户输入动态创建和显示图表，而 jquery 是一种熟悉的动态创建元素的方式。

标签： vue.js highcharts

【解决方案1】：

看下面的例子，你必须使用 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>

【讨论】：

【解决方案2】：

尝试像这样更改导入顺序：

// 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);

【讨论】：