Question

我试图围绕谷歌的图表包创建一个包装类。我得到的错误是Uncaught TypeError：无法读取属性＆＃39; arrayToDataTable＆＃39;未定义的。我认为问题在于它在访问Google图表功能时遇到了问题？

查看：

@extends('layouts/secondary')

@section('title', 'Charts')

@section('scripts')
{!! HTML::script('https://www.gstatic.com/charts/loader.js') !!}
{!! HTML::script('/assets/js/custom-plugins/charts/charts-bar.js')!!}
@stop

@section('content')
@parent

<div class="row main-content">
    <h1>Charts</h1>

    <div id="barChartContainer"></div>
</div>

<script type="text/javascript">
    var data = [
        ['City', '2010 Population'],
        ['New York City, NY', 8175000],
        ['Los Angeles, CA', 3792000],
        ['Chicago, IL', 2695000],
        ['Houston, TX', 2099000],
        ['Philadelphia, PA', 1526000]
    ];
    var options = {
        title: 'Population of Largest U.S. Cities',
        chartArea: {width: '50%'},
        hAxis: {
            title: 'Total Population',
            minValue: 0
        },
        vAxis: {
            title: 'City'
        }
    };

    var bar = new BarChart('barChartContainer', data, options);
    bar.draw();
</script>
@stop

类别：

function BarChart(container, data, options){
  this.container  = container;
  this.data       = data;
  this.options    = options;

  this.getData = function(){
    return data;
  };

  this.getOptions = function(){
    return options;
  };

  this.getContainer = function(){
    return container;
  };
}

BarChart.prototype.draw = function(){
  google.charts.load('current', {packages: ['corechart', 'bar']});
  google.charts.setOnLoadCallback(this.drawChart());
};

BarChart.prototype.drawChart = function(){
  var chartData = 
            google.visualization.arrayToDataTable(this.getData());
  var chart = new google.visualization.BarChart(
                  document.getElementById(this.getContainer()));

  chart.draw(chartData, this.getOptions());
};

当我没有使用该类时，我可以显示图表，并且创建图表的代码在视图脚本中。

Answer 1

我从Use parameter in function passed to google.setOnLoadCallback();得到了答案。

问题在于我正在调用函数而不是将函数传递给setOnLoadCallback。我的绘制功能应该是这样的：

BarChart.prototype.draw = function(){
   var container = this.getContainer();
   var data = this.getData();
   var options = this.getOptions();
   var drawChart = this.drawChart;

   google.charts.load('current', {packages: ['corechart', 'bar']});
   google.charts.setOnLoadCallback(function(){
       drawChart(container, data, options);
   });
};

在javascript中围绕第三方包创建包装类

1 个答案: