Question

我有一个HTML文件，该文件应该显示一个图表，该图表将显示过去几分钟中特定过程的详细信息。当我声明时，它给出如下错误 google.charts.load('current', {'packages':['line']}); google.charts.setOnLoadCallback($scope.drawChart);

未捕获（承诺）TypeError：google.visualization.LineChart不是构造函数在$ scope.drawChart

我不确定否则如何调用此函数。以下是我的控制器JS文件中的代码。

$scope.drawChart = function() {

    var finaldata = [[{label:'Process', type: 'string'}, {label: 'NumOfNewAssociations', type: 'number'}, {label: 'NumOfClosedAssociations', type: 'number'}, {label: 'NumOfSavedImages', type: 'number'}, {label: 'SizeOfSavedImagesInBytes', type: 'number'}]];
    for (var i = 1; i < 2/*$scope.storestats2.length*/; i++) {
        finaldata[i] = [$scope.storestats2.Process, $scope.storestats2.NumOfNewAssociations, $scope.storestats2.NumOfClosedAssociations, $scope.storestats2.NumOfSavedImages, $scope.storestats2.SizeOfSavedImagesInBytes];
    }

    var data = google.visualization.arrayToDataTable(finaldata);
    var options = {
        chart: {
            title: 'Range-wise Store statistics',
            subtitle: 'in the last 30 minutes'
        },
        width: 900,
        height: 500
    };
    var chart = new google.visualization.LineChart(document.getElementById('linechart_material'));
    chart.draw(data, google.charts.Line.convertOptions(options));
};

我什至尝试在HTML文件中包含以下内容：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

这是我打算在HTML中调用该函数的地方：

<div id="linechart_material" style="width: 900px; height: 500px"></div>

我还可以看到在网页中分配的空间，但是没有任何显示。除此图表外，所有其他功能均正常运行。我什至尝试只做一张图表。还是一样。但是，当我将其作为单独的HTML文件使用嵌入式JS控制器和其他本地定义的数组进行处理时，代码可以正常工作。但是我无法使其在必须位于不同文件中的上下文中正常工作。

Answer 1

我不小心偶然发现了这个问题的解决方案。但是我仍然不知道它是如何解决的以及为什么。

我要做的就是仅对代码的一行进行更改：

我必须更改：

var chart = new google.visualization.LineChart(document.getElementById('linechart_material'));

进入

var chart = new google.charts.Line(document.getElementById('linechart_material'));

出现错误：LineChart不是构造函数，并且图表未显示在网页中

1 个答案: