js中的Highchart在Vue.js中不起作用

Question

I have a highchart in a html file which works fine. 我在html文件中有一个图表，可以正常工作。 When I moved that to vue.js project it does not work. 当我将其移至vue.js项目时，它不起作用。 the code in html file is as below html文件中的代码如下

<html>
    <head>
        <title>
            Chart
        </title>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script src="https://code.highcharts.com/modules/exporting.js"></script>
        <script src="https://code.highcharts.com/modules/export-data.js"></script>
    </head>
    <body>
        <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
        <script>
            Highcharts.setOptions({
                global: {
                    useUTC: false
                }
            });            
            const chart = new Highcharts.chart('container', {
                chart: {
                    type: 'spline',
                    animation: Highcharts.svg, 
                    marginRight: 10,
                },
                title: {
                    text: 'Live random data'
                },
                xAxis: {
                    type: 'datetime',
                    tickPixelInterval: null,
                    maxZoom: 10 * 1000
        },
                yAxis: {
                    title: {
                        text: 'Value'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.series.name + '</b><br/>' +
                            Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                            Highcharts.numberFormat(this.y, 2);
                    }
                },
                legend: {
                    enabled: false
                },
                exporting: {
                    enabled: false
                },
                series: []             
            });
            document.addEventListener('DOMContentLoaded', function() {                
                var i = 0;  
                setInterval(function () {
                if (chart.series.length > 0) {
                    var series = chart.series[0];
                        var x = (new Date()).getTime(),
                            y = Math.random();
                            if (series.data.length < 20)
                                series.addPoint([x, y], true, false);
                            else
                                series.addPoint([x, y], true, true);
                        console.log(1)
                    }
                else {
                    a = { name: 'aaa', data: [{x: (new Date()).getTime(), y:Math.random()}] };
                    chart.addSeries(a); 
                    console.log(chart.series[0].name)                       
                }                          
            }, 1000);
            });
        </script>
    </body>
</html>

and the code in vue is as below Vue中的代码如下

<template>
    <div class="container">
        <b-row>
            <b-col md="12" sm="12">
            <b-card header="Line Chart">
                <div class="chart-wrapper">
                <vue-highcharts :options="options" :Highcharts="Highcharts" ref="lineCharts"></vue-highcharts>
                </div>
            </b-card>
            </b-col>
        </b-row>
    </div>
</template>

<script>
import VueHighcharts from 'vue2-highcharts'
import Highcharts from 'highcharts'

export default {
  name: 'chartSample',
  components: {
    VueHighcharts
  },
  data () {
    return {
      Highcharts: Highcharts,
      options: {
        chart: {
          type: 'spline',
          animation: Highcharts.svg, // don't animate in old IE
          marginRight: 10
        },
        title: {
          text: 'Live random data'
        },
        xAxis: {
          type: 'datetime',
          tickPixelInterval: null,
          maxZoom: 10 * 1000
        },
        yAxis: {
          title: {
            text: 'Value'
          },
          plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
          }]
        },
        tooltip: {
          formatter: function () {
            return '<b>' + this.series.name + '</b><br/>' +
              Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
              Highcharts.numberFormat(this.y, 2)
          }
        },
        legend: {
          enabled: false
        },
        exporting: {
          enabled: false
        },
        series: []
      }
    }
  },
  mounted () {
    let chart = this.$refs.lineCharts
    setInterval(function () {
      if (chart.series != null) {
        var series = chart.series[0]
        var x = (new Date()).getTime()
        var y = Math.random()
        if (series.data.length < 20) {
          series.addPoint([x, y], true, false)
        } else {
          series.addPoint([x, y], true, true)
        }
      } else {
        var a = { name: 'aaa', data: [{x: (new Date()).getTime(), y: Math.random()}] }
        chart.addSeries(a)        
      }
    }, 1000)
  }
}
</script>

I don't know what is the reason, but it doesn't work. 我不知道是什么原因，但这是行不通的。 It seems most parts are undefined or the chart object in the page has a problem. 似乎大多数部分都未定义，或者页面中的图表对象有问题。 But it is working in html file. 但它在html文件中工作。

Answer 1

You can not directly access series array of Vue wrapper for Highcharts. 您不能直接访问Highcharts的Vue包装器的series数组。 To access internal Highcharts object call getChart method: 要访问内部Highcharts对象，请调用getChart方法：

 new Vue({ el: "#app", name: 'chartSample', components: { VueHighcharts: VueHighcharts.default }, data () { return { Highcharts: Highcharts, options: { chart: { type: 'spline', animation: Highcharts.svg, // don't animate in old IE marginRight: 10 }, title: { text: 'Live random data' }, xAxis: { type: 'datetime', tickPixelInterval: null, maxZoom: 10 * 1000 }, yAxis: { title: { text: 'Value' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function () { return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 2) } }, legend: { enabled: false }, exporting: { enabled: false }, series: [] } } }, mounted () { var chart = this.$refs.lineCharts; setInterval(function () { var series = chart.getChart().series[0]; if (series != null) { var x = (new Date()).getTime() var y = Math.random() if (series.data.length < 20) { series.addPoint([x, y], true, false) } else { series.addPoint([x, y], true, true) } } else { var a = { name: 'aaa', data: [{x: (new Date()).getTime(), y: Math.random()}] } chart.addSeries(a) } }, 1000) } })

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue2-highcharts@1.2.4/dist/vue-highcharts.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <div id="app"> <div class="chart-wrapper"> <vue-highcharts :options="options" :Highcharts="Highcharts" ref="lineCharts"></vue-highcharts> </div> </div>

js中的Highchart在Vue.js中不起作用

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-07-20 16:52:04

js中的Highchart在Vue.js中不起作用

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-07-20 16:52:04

解决方案1
1 已采纳 2018-07-20 16:52:04