使用错误#17的npm高图绘制气泡图
Drawing Bubble Chart by using npm highcharts with error #17
我正试图使用npm版本的highchart绘制一个带有highchart的气泡图,但出现了错误#17,我已经尝试过更多地导入highchart,但没有成功。。。
我有以下进口
import $ from "jquery";
import _ from "underscore";
import Logger from 'js-logger';
import Marionette from 'backbone.marionette';
import Highcharts from 'Highcharts';
import 'Highcharts/highcharts-more';
气泡图的选项如下:
settings = {
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
legend: {
enabled: false
},
title: {
text: 'Sugar and fat intake per country'
},
subtitle: {
text: 'Source: <a href="http://www.euromonitor.com/">Euromonitor</a> and <a href="https://data.oecd.org/">OECD</a>'
},
xAxis: {
gridLineWidth: 1,
title: {
text: 'Daily fat intake'
},
labels: {
format: '{value} gr'
},
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 65,
label: {
rotation: 0,
y: 15,
style: {
fontStyle: 'italic'
},
text: 'Safe fat intake 65g/day'
},
zIndex: 3
}]
},
yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: 'Daily sugar intake'
},
labels: {
format: '{value} gr'
},
maxPadding: 0.2,
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 50,
label: {
align: 'right',
style: {
fontStyle: 'italic'
},
text: 'Safe sugar intake 50g/day',
x: -10
},
zIndex: 3
}]
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' +
'<tr><th>Fat intake:</th><td>{point.x}g</td></tr>' +
'<tr><th>Sugar intake:</th><td>{point.y}g</td></tr>' +
'<tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>',
footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
data: [{
x: 95,
y: 95,
z: 13.8,
name: 'BE',
country: 'Belgium'
}, {
x: 86.5,
y: 102.9,
z: 14.7,
name: 'DE',
country: 'Germany'
}, {
x: 80.8,
y: 91.5,
z: 15.8,
name: 'FI',
country: 'Finland'
}, {
x: 80.4,
y: 102.5,
z: 12,
name: 'NL',
country: 'Netherlands'
}, {
x: 80.3,
y: 86.1,
z: 11.8,
name: 'SE',
country: 'Sweden'
}, {
x: 78.4,
y: 70.1,
z: 16.6,
name: 'ES',
country: 'Spain'
}, {
x: 74.2,
y: 68.5,
z: 14.5,
name: 'FR',
country: 'France'
}, {
x: 73.5,
y: 83.1,
z: 10,
name: 'NO',
country: 'Norway'
}, {
x: 71,
y: 93.2,
z: 24.7,
name: 'UK',
country: 'United Kingdom'
}, {
x: 69.2,
y: 57.6,
z: 10.4,
name: 'IT',
country: 'Italy'
}, {
x: 68.6,
y: 20,
z: 16,
name: 'RU',
country: 'Russia'
}, {
x: 65.5,
y: 126.4,
z: 35.3,
name: 'US',
country: 'United States'
}, {
x: 65.4,
y: 50.8,
z: 28.5,
name: 'HU',
country: 'Hungary'
}, {
x: 63.4,
y: 51.8,
z: 15.4,
name: 'PT',
country: 'Portugal'
}, {
x: 64,
y: 82.9,
z: 31.3,
name: 'NZ',
country: 'New Zealand'
}]
}]
};
呈现图表
let settings = this.bubbleChartSetting();
console.log(settings);
setTimeout(() => {
Highcharts.chart('container', settings);
}, 1);
错误消息
highcharts.js:8 Uncaught Error: Highcharts error #17: www.highcharts.com/errors/17
由于未正确导入highcharts-more
,因此出现错误。
尝试根据导入
import $ from "jquery";
import _ from "underscore";
import Logger from 'js-logger';
import Marionette from 'backbone.marionette';
import Highcharts from 'Highcharts';
require('highcharts/highcharts-more.js')(Highcharts);
如果您在Vue组件中工作,您所要做的就是在图表组件中导入这些文件
import More from 'highcharts/highcharts-more'
import Highcharts from 'highcharts'
More(Highcharts)
这对Highcharts 6.1.0版本有帮助
import Highcharts from "highcharts6";
require('highcharts6/highcharts-more.src')(Highcharts);
require('highcharts6/modules/treemap.src')(Highcharts);
require('highcharts6/modules/heatmap.src')(Highcharts);
require('highcharts6/modules/drilldown.src')(Highcharts);
相关文章:
- 动态更改高图中的系列颜色
- 如何为高图中的区域线创建z索引
- 将高图饼图中的文本居中显示为响应
- 可以对一个图表进行高图深化,反映在另一个图表上
- 如何将数据标签与数据一起传递,以便在高图中的工具提示中显示
- 如何在悬停时更改高图的不透明度
- 升级到 jQuery 1.8 后出现高图缩放问题
- 高图3.0.7是否允许高图
- 指定饼图高图的颜色
- 高图热图:单击按钮或复选框时选择所有单元格
- 高图 - 分组/近似后保持多个系列之间的关系
- 使用高图表绘制实时数据图
- 使用错误#17的npm高图绘制气泡图
- 高图-在鼠标位置绘制十字准线/工具提示,而不是捕捉到数据点
- 为高图中的工具提示绘制自定义背景形状
- 以编程方式绘制直线和直线在高图与缩放
- 高图重新绘制和回流不起作用
- 将高图中的x个y点绘制为[[x点列表]、[y点列表]]
- 在高图中单击系列时绘制垂直线
- 高图线不会被绘制,直到浏览器调整大小