Question

我在html文件中有一个图表，可以正常工作。当我将其移至vue.js项目时，它不起作用。 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>

并且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>

我不知道是什么原因，但这是行不通的。似乎大多数部分都未定义，或者页面中的图表对象有问题。但是它可以在html文件中工作。

Answer 1

您无法直接访问Highcharts的series Vue包装器数组。要访问内部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 个答案: