Question

我正在尝试使用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)

这是我的图表的片段：

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，但是却看到了Highcharts错误＃17（请求的序列类型不存在）。

当我用常规的折线图替换列范围图时，一切正常。

更新：令人尴尬的是，我发现了我的问题。实际上，“ columnrage”与“ columnrange”不同。我不知道应该给谁以正确的答案，因为可能出现的原因是我一遍又一遍地错过了自己的印刷错误。

谢谢大家的帮助！

Answer 1

请看下面的示例，您必须使用Vue环境初始化数据。该图表安装在组件内部。您可能不需要在这里使用jquery。

Audit.Core.Configuration.Setup().UseNullProvider();

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;
}

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

Highcharts错误＃17（Vue.js），在columnrange系列中

2 个答案: