Highcharts-more.js funktioniert nicht in vue-cli Projekt

Question

diese wenige Wochen Im auf einem vue-cli Projekt arbeiten und ich versuche, ein polares Diagramm wie dies zu machen: https://www.highcharts.com/demo/polar-spider

Wie diese Tabelle erforderlich highchart-more Datei, also installiere und importiere ich die highcharts und highchart-more Bibliotheken mit npm. Allerdings habe ich nach dem Importieren der beiden Dateien den folgenden Fehler in meiner Chrome-Konsole und das Highchart kann nicht geladen werden. Fehler

highcharts-more.js?7b43:8 Uncaught TypeError: p is not a function 
at eval (eval at <anonymous> (app.js:874), <anonymous>:8:212) 
at eval (eval at <anonymous> (app.js:874), <anonymous>:11:205) 
at eval (eval at <anonymous> (app.js:807), <anonymous>:39:67) 
at Object.<anonymous> (app.js:807) 
at __webpack_require__ (app.js:658) 
at fn (app.js:86) 
at Object.<anonymous> (app.js:1182) 
at __webpack_require__ (app.js:658) 
at app.js:707 
at app.js:710 

Wenn ich nur die highchart-Datei importieren, das Plugin Last nur sein kann, aber so aussehen (Grundliniendiagramm, nicht Polardiagramm) https://www.highcharts.com/demo/line-basic

Wie kann ich die highchart verwenden können -mehr Datei richtig? Vielen Dank!!

Hier ist mein Code:

main.js

import Vue from 'vue' 
import App from './App' 
import VueRouter from 'vue-router' 
import VueResource from 'vue-resource' 

// import $ from 'jquery' 
import VueHighcharts from 'vue-highcharts' 
import HighchartsMore from 'highcharts/highcharts-more' 
Vue.use(VueRouter) 
Vue.use(VueResource) 

Vue.use(VueHighcharts) 
HighchartsMore(VueHighcharts) 

const router = new VueRouter({ 
    routes: [ 
    { 
     path: '/result', 
     name: 'result', 
     component: Result 
    }, 
    { path: '/*', redirect: '/introduction' }     // Redirect all path to /hello 
    ] 
}) 

/* eslint-disable no-new */ 
new Vue({ 
    el: '#app', 
    router, 
    template: '<App/>', 
    components: { App }, 
    data: { 
    currentSection: 1, 
    currentCategory: 1 
    } 


    }) 

Result.vue

<template> 
    <div> 
    <highcharts :options="options"></highcharts> 

    <div class="col-sm-9"> 
     <router-view></router-view> 
    </div> 
    </div> 
</template> 

<script> 
    var options = { 

    chart: { 
     polar: true 
    }, 

    title: { 
     text: 'Highcharts Polar Chart' 
    }, 

    pane: { 
     startAngle: 0, 
     endAngle: 360 
    }, 

    xAxis: { 
     tickInterval: 45, 
     min: 0, 
     max: 360, 
     labels: { 
     formatter: function() { 
      return this.value + '°' 
     } 
     } 
    }, 

    yAxis: { 
     min: 0 
    }, 

    plotOptions: { 
     series: { 
     pointStart: 0, 
     pointInterval: 45 
     }, 
     column: { 
     pointPadding: 0, 
     groupPadding: 0 
     } 
    }, 

    series: [{ 
     type: 'column', 
     name: 'Column', 
     data: [8, 7, 6, 5, 4, 3, 2, 1], 
     pointPlacement: 'between' 
    }, { 
     type: 'line', 
     name: 'Line', 
     data: [1, 2, 3, 4, 5, 6, 7, 8] 
    }, { 
     type: 'area', 
     name: 'Area', 
     data: [1, 8, 2, 7, 3, 6, 4, 5] 
    }] 

    } 

    export default { 
    data() { 
     return { 
     options: options 
     } 
    } 
    } 
</script> 

Answer 1

schließlich eine Antwortdatei Datei gefunden:

bearbeiten main.js-Datei wie folgt:

import Highcharts from 'highcharts' 
import VueHighcharts from 'vue-highcharts' 
import highchartsMore from 'highcharts/highcharts-more' 

highchartsMore(Highcharts) 
Vue.use(VueHighcharts, {Highcharts}) 

es wie ein Zauber funktioniert :)