Question

我正在尝试使用highcharts-vue包装器在Vue.js应用程序的股票图表中显示一些数据。

当图表中的点数太大时触发dataGrouping（默认情况下处于活动状态）时，我遇到了一个问题。我收到以下错误：

[Vue warn]: Error in callback for watcher "options": "TypeError: F is undefined"

但是，如果我停用dataGrouping选项，则我的图表会很好显示。

我尝试覆盖approximation函数（默认情况下应该是折线图的平均值），但是即使我可以看到自定义函数运行良好，但还是会出现错误。

~~我试图制作一个jsfiddle来重现我的错误，但是我没有找到使用highcharts-vue包装器创建股票图表的方法。~~

编辑：我创建了一个sandbox，其中包含图表的精简版本以及我的数据示例，但它工作得很好并且不会重现该错误。当我在应用程序内部使用相同的代码（您可以在gitlab上看到它here）时，出现了我的错误。

（实际上，我会遇到多种错误。当我使用vue-cli-service serve并在Firefox中显示时，它显示为Error in mounted hook: "TypeError: y is undefined"，但在Chrome中显示为Error in mounted hook: "TypeError: Cannot read property 'x' of undefined"，最后当我{{ 1}}错误在Firefox中变成build，在Chrome中保持不变。）

这是完整的错误堆栈跟踪：

TypeError: "w is undefined"

我在本地下载了沙箱代码，并尝试通过删除多余的东西将其放入我的应用程序代码中，但它不起作用，并且将简单的Chart放在我的原始应用程序中也不起作用。

因此，我想问题可能在于将vue-cli，vue-router和vue-loader的使用与highcharts-vue的使用混合在一起。可能只是我做错了一个简单的初始化或导入步骤...

这是我组件的简化代码。该系列的创建是通过修改我的探针列表（checkedProbesOnline）触发的，我通过调用API来获取数据：

[Vue warn]: Error in mounted hook: "TypeError: y is undefined"

found in

---> <Highcharts>
       <LineChart> at src/components/LineChart.vue
         <GridItem> at GridItem.vue
           <GridLayout> at GridLayout.vue
             <Home> at src/views/Home.vue
               <App> at src/App.vue
                 <Root> vue.runtime.esm.js:601
TypeError: "y is undefined"
    translate webpack-internal:///./node_modules/highcharts/highcharts.js:316:361
    renderSeries webpack-internal:///./node_modules/highcharts/highcharts.js:279:498
    renderSeries webpack-internal:///./node_modules/highcharts/highcharts.js:279:466
    render webpack-internal:///./node_modules/highcharts/highcharts.js:281:384
    <anonymous> webpack-internal:///./node_modules/highcharts/modules/stock.js:134:7
    c webpack-internal:///./node_modules/highcharts/highcharts.js:21:233
    <anonymous> webpack-internal:///./node_modules/highcharts/modules/stock.js:134:7
    c webpack-internal:///./node_modules/highcharts/highcharts.js:21:233
    firstRender webpack-internal:///./node_modules/highcharts/highcharts.js:284:407
    init webpack-internal:///./node_modules/highcharts/highcharts.js:258:369
    fireEvent webpack-internal:///./node_modules/highcharts/highcharts.js:32:244
    init webpack-internal:///./node_modules/highcharts/highcharts.js:257:119
    getArgs webpack-internal:///./node_modules/highcharts/highcharts.js:257:39
    Chart webpack-internal:///./node_modules/highcharts/highcharts.js:256:337
    stockChart webpack-internal:///./node_modules/highcharts/modules/stock.js:139:135
    mounted webpack-internal:///./node_modules/highcharts-vue/dist/module/highcharts-vue.min.js:1:1514
    callHook webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:3037:9
    insert webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4255:7
    invokeInsertHook webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:6046:28
    patch webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:6265:5
    _update webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2777:16
    updateComponent webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2898:7
    get webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:3268:13
    Watcher webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:3257:7
    mountComponent webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2905:3
    mount webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:8060:10
    <anonymous> webpack-internal:///./src/main.js:39:4
    js http://localhost:8080/app.js:2774:1
    __webpack_require__ http://localhost:8080/app.js:767:12
    fn http://localhost:8080/app.js:130:20
    0 http://localhost:8080/app.js:2847:18
    __webpack_require__ http://localhost:8080/app.js:767:12
    <anonymous> http://localhost:8080/app.js:902:18
    <anonymous> http://localhost:8080/app.js:1:11

如果您想查看我的API返回的JSON数据，请将其复制到此处：gist

我到处寻找有同样错误的人，但没有找到任何东西，因此将不胜感激任何帮助或建议。

Vue-CLI项目中的Highcharts-Vue中的股票图表：数据分组不起作用

0 个答案: