我有一个场景，我必须在一个页面中使用Rangechart和柱形图，我需要为这两种图表类型异步调用Highchart JS文件。
Rangechart工作正常，向下钻取也工作正常，但柱形图的向下钻取不工作。
错误：未捕获的类型错误：无法读取未定义的属性（阅读'stacks'）”
jsfiddle URL：http://jsfiddle.net/qk3en5a8/
完整代码（虽然在演示端提供，但此处仅供快速参考）
(async () => {
const { default: Highcharts } =
await import('https://code.highcharts.com/es-modules/masters/highcharts.src.js');
await import('https://code.highcharts.com/es-modules/masters/highcharts-more.src.js');
await import('https://code.highcharts.com/es-modules/masters/modules/drilldown.src.js');
Highcharts.chart('container', {
chart: {
type: 'columnrange',
inverted: false
},
title: {
text: ''
},
subtitle: {
text: '7'
},
xAxis: {
type: 'category',
labels: {
rotation: 0,
y: -110,
style: {
color: '#111',
fontSize: '.85rem',
}
}
},
yAxis: {
plotLines: [{
color: '#ffff',
width: 30,
value: 0,
zIndex: 5
}]
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
format: '{y}'
}
}
},
legend: {
enabled: true,
align: 'left'
}, credits: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
data: [{
low: -34,
high: 39,
drilldown: 'marketrisk1'
}, {
low: -36,
high: 36,
drilldown: 'creditqualityrisk1'
}, {
low: -33,
high: 40,
drilldown: 'liquidityrisk1'
}, {
low: -15,
high: 57,
drilldown: 'inflationrisk1'
}]
}, {
data: [{
low: -32,
high: 40,
drilldown: 'marketrisk2'
}, {
low: -34,
high: 30,
drilldown: 'creditqualityrisk2'
}, {
low: -26,
high: 49,
drilldown: 'liquidityrisk2'
}, {
low: -12,
high: 61,
drilldown: 'inflationrisk2'
}]
}, {
name: 'Public pension',
data: [{
low: -41,
high: 28,
drilldown: 'marketrisk3'
}, {
low: -30,
high: 35,
drilldown: 'creditqualityrisk3'
}, {
low: -32,
high: 36,
drilldown: 'liquidityrisk3'
}, {
low: -10,
high: 63,
drilldown: 'inflationrisk3'
}]
}],
drilldown: {
breadcrumbs: {
buttonTheme: {
fill: '#ffffff',
padding: 8,
stroke: '#253746',
'stroke-width': 1,
borderRadius: 0,
width: 110
},
floating: true,
position: {
align: 'right'
},
showFullPath: false,
format: '‹ Back to Segments',
borderRadius: 0
},
series: [{
id: 'marketrisk1',
showInLegend: false,
data: [{
low: -24,
high: 46
}, {
low: -40,
high: 39
}, {
low: -31,
high: 28
}]
}, {
id: 'creditqualityrisk1',
showInLegend: false,
data: [{
low: -22,
high: 41
}, {
low: -38,
high: 40
}, {
low: -44,
high: 21
}]
}, {
id: 'liquidityrisk1',
showInLegend: false,
data: [{
low: -24,
high: 51
}, {
low: -35,
high: 36
}, {
low: -36,
high: 38
}]
}, {
id: 'inflationrisk1',
showInLegend: false,
data: [{
low: -12,
high: 49
}, {
low: -16,
high: 62
}, {
low: -15,
high: 54
}]
}, {
id: 'marketrisk2',
showInLegend: false,
data: [{
low: -43,
high: 32
}, {
low: -25,
high: 45
}, {
low: -33,
high: 42
}]
}, {
id: 'creditqualityrisk2',
showInLegend: false,
data: [{
low: -39,
high: 29
}, {
low: -34,
high: 33
}, {
low: -26,
high: 23
}]
}, {
id: 'liquidityrisk2',
showInLegend: false,
data: [{
low: -23,
high: 55
}, {
low: -30,
high: 42
}, {
low: -19,
high: 58
}]
}, {
id: 'inflationrisk2',
showInLegend: false,
data: [{
low: -10,
high: 71
}, {
low: -11,
high: 54
}, {
low: -19,
high: 65
}]
}, {
id: 'marketrisk3',
showInLegend: false,
data: [{
low: -33,
high: 26
}, {
low: -43,
high: 30
}, {
low: -48,
high: 29
}]
}, {
id: 'creditqualityrisk3',
showInLegend: false,
data: [{
low: -23,
high: 36
}, {
low: -33,
high: 35
}, {
low: -39,
high: 32
}]
}, {
id: 'liquidityrisk3',
showInLegend: false,
data: [{
low: -30,
high: 39
}, {
low: -31,
high: 35
}, {
low: -39,
high: 39
}]
}, {
id: 'inflationrisk3',
showInLegend: false,
data: [{
low: -20,
high: 58
}, {
low: -18,
high: 59
}, {
low: 0,
high: 84
}]
}]
}
});
$('#container').removeAttr('style');
})();
(async () => {
const { default: Highcharts } =
await import('https://code.highcharts.com/es-modules/masters/highcharts.src.js');
await import('https://code.highcharts.com/es-modules/masters/modules/drilldown.src.js');
Highcharts.chart('container1', {
chart: {
type: 'column',
events: {
drilldown: function (e) {
this.setTitle({ text: "after drill down>" });
},
drillup: function (e) {
this.setTitle({ text: 'title' });
}
}
},
title: {
align: 'left',
text: 'title'
},
accessibility: {
announceNewData: {
enabled: true
}
},
xAxis: {
type: 'category'
},
yAxis: [{
className: 'highcharts-color-0',
title: {
text: '', enabled: false
},
labels: {
text: '',
format: '{value}%',
enabled: false
}
}, {
className: 'highcharts-color-1',
opposite: true,
title: {
text: ''
},
labels: {
text: ''
}
}],
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y}%',
y: 25,
color: 'black'
}
}
},
exporting: {
enabled: false
},
legend: {
align: 'left',
symbolHeight: 18,
symbolWidth: 18,
symbolRadius: 12,
symbolPadding: 10
},
tooltip: {
formatter: function () {
return this.key + '<br />' + this.series.name +
':' + this.y + '%'
}
},
series:
[{
color: "#c3d642",
data: [
{
y: 43,
drilldown: "yes_all"
},
{
y: 40,
drilldown: "yes_noram"
},
{
y: 46,
drilldown: "yes_emea"
},
{
y: 42,
drilldown: "yes_apac"
}
]
},
{
color: "#08bed5",
data: [
{
y: 36,
drilldown: "not_all"
},
{
y: 33,
drilldown: "not_noram"
},
{
y: 34,
drilldown: "not_emea"
},
{
y: 46,
drilldown: "not_apac"
}
]
},
{
color: "#ff5048",
data: [
{
y: 19,
drilldown: "no_all"
},
{
y: 26,
drilldown: "no_noram"
},
{
y: 19,
drilldown: "no_emea"
},
{
y: 8,
drilldown: "no_apac"
}
]
}],
drilldown: {
breadcrumbs: {
buttonTheme: {
fill: '#ffffff',
padding: 8,
stroke: '#253746',
'stroke-width': 1,
borderRadius: 0,
width: 110
},
floating: true,
position: {
align: 'right'
},
showFullPath: false,
format: '‹ Back to Region',
borderRadius: 0
},
series: [{
id: 'yes_all',
showInLegend: false,
data: [
['a', 51],
['b', 32],
['c', 43]
]
}, {
id: 'yes_noram',
showInLegend: false,
data: [
['a', 54],
['b', 28],
['c', 38]
]
}, {
id: 'yes_emea',
showInLegend: false,
data: [
['a', 57],
['b', 34],
['c', 48]
]
}, {
id: 'yes_apac',
showInLegend: false,
data: [
['a', 31],
['b', 33],
['c', 39]
]
}, {
id: 'not_all',
showInLegend: false,
data: [
['a', 40],
['b', 44],
['c', 31]
]
}, {
id: 'not_noram',
showInLegend: false,
data: [
['a', 41],
['b', 45],
['c', 21]
]
}, {
id: 'not_emea',
showInLegend: false,
data: [
['a', 29],
['b', 41],
['c', 34]
]
}, {
id: 'not_apac',
showInLegend: false,
data: [
['a', 64],
['b', 51],
['c', 45]
]
}, {
id: 'no_all',
showInLegend: false,
data: [
['a', 9],
['bn', 21],
['c', 24]
]
}, {
id: 'no_noram',
showInLegend: false,
data: [
['a', 5],
['b', 25],
['c', 41]
]
}, {
id: 'no_emea',
showInLegend: false,
data: [
['a', 12],
['b', 21],
['c', 18]
]
}, {
id: 'no_apac',
showInLegend: false,
data: [
['a', 5],
['b', 16],
['c', 3]
]
}]
}, credits: {
enabled: true
}
});
$('#container1').removeAttr('style');
})();
1条答案
按热度按时间whitzsjs1#
首先，即使你需要在一个页面上显示两个图表，你也只能导入Highcharts及其模块一次。因此，如下所示的内容就足够了：
实时示例：http://jsfiddle.net/BlackLabel/5w9d1bxs/
但是，在您的示例中，加载模块的顺序有问题。您可以在此处检查顺序：http://jsfiddle.net/BlackLabel/m1px6c5q/
如果您也在第二个异步函数中导入
highcharts-more，则向下钻取将正常工作-示例：http://jsfiddle.net/BlackLabel/v4f395q8/
或者如果你推迟了第二次进口-
示例：http://jsfiddle.net/BlackLabel/fk61qw3n/