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

Highcharts Error #17 (Vue.js), in columnrange series

我正在尝试使用Highcharts在Vue.js应用程序中显示列范围图，但是却出现Highcharts错误#17(请求的序列类型不存在)。

我已经通过npm安装了highcharts @ 6.1.4，highcharts-vue @ 1.2.0和[email protected]。

这是我的进口商品：

1
2
3
4
5
6
7

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

HighchartsMore(Highcharts)

Vue.use(HighchartsVue)

这是我的图表的片段：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

...

$('#charts').append('');
let display_chart = new Highcharts.Chart({
chart: chart,
title: title,
....
});

我希望看到一个列范围图，但是却看到Highcharts错误#17(所请求的序列类型不存在)，尽管导入了highcharts-more。

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

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

谢谢大家的帮助！

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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

}
}
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

1
2
3
4
5
6
7
8
9
10
11
12
13

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

1
2
3
4
5
6
7
8
9
10
11
12
13

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