highcharts-more.js는 vue-cli 프로젝트에서 작동하지 않음

highcharts-more.js는 vue-cli 프로젝트에서 작동하지 않음

이번 몇 주 동안 나는 부에-cli 프로젝트를 하고 있고 나는 이와 같은 극지방도를 만들려고 한다. https://www.highcharts.com/demo/polar-spider

이 차트는 하이차트 이상의 파일이 필요하기 때문에, 나는 highcharts와 highchart-more 라이브러리를 npm을 이용하여 설치하고 수입한다.그러나 두 파일을 모두 가져온 후 크롬 콘솔에 다음 오류가 발생하여 하이차트를 로드할 수 없다.오류

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

하이차트 파일만 가져오면 플러그인이 로드될 수 있지만 이 모양(폴라 차트가 아닌 기본 선 그래프) https://www.highcharts.com/demo/line-basic

highchart more 파일을 올바르게 사용하는 방법고마워!!

내 암호는 다음과 같다.

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
  }


   })

결과.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>

마침내 답을 찾았다:

다음과 같이 main.js 파일 편집:

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

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

그것은 매력처럼 작용할 것이다 :)

참조URL: https://stackoverflow.com/questions/43802593/highcharts-more-js-doesnt-work-in-vue-cli-project