使用错误#17的npm高图绘制气泡图

Drawing Bubble Chart by using npm highcharts with error #17

本文关键字:高图 绘制 气泡 npm 错误      更新时间:2023-09-26

我正试图使用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);