以角度动态将数据加载到谷歌图表

时间:2016-04-14 14:49:30

标签: javascript html asp.net angularjs

我的网站主要是angularJS。我有一个控制器调用一个JS服务,从我的数据库中提取一些图形数据。然后我想使用这些数据作为我的HTML中google图形函数的源输入,但是我的谷歌图表的唯一示例仅是客户端,不包括角度。

到目前为止,这是我的客户端代码

@{
    Layout = null;
}
<script type="text/javascript">
    function renderRunChart(data) {
        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawRunChart(data));
    }

    function drawRunChart(data) {
        var data = google.visualization.arrayToDataTable([
            ['Time', 'Cores'],
            ['Apr11 16:00', 0], ['Apr11 16:05', 0], ['Apr11 16:10', 0], ['Apr11 16:15', 0], ['Apr11 16:20', 0], ['Apr11 16:25', 0], ['Apr11 16:30', 0], ['Apr11 16:35', 0], ['Apr11 16:40', 0], ['Apr11 16:45', 0], ['Apr11 16:50', 0], ['Apr11 16:55', 0], ['Apr11 17:00', 0], ['Apr11 17:05', 0], ['Apr11 17:10', 0], ['Apr11 17:15', 0], ['Apr11 17:20', 0], ['Apr11 17:25', 0], ['Apr11 17:30', 0], ['Apr11 17:35', 0], ['Apr11 17:40', 0], ['Apr11 17:45', 0], ['Apr11 17:50', 0], ['Apr11 17:55', 0], ['Apr11 18:00', 0], ['Apr11 18:05', 0], ['Apr11 18:10', 0], ['Apr11 18:15', 0], ['Apr11 18:20', 0], ['Apr11 18:25', 0], ['Apr11 18:30', 0], ['Apr11 18:35', 0], ['Apr11 18:40', 0], ['Apr11 18:45', 0], ['Apr11 18:50', 0], ['Apr11 18:55', 0], ['Apr11 19:00', 0], ['Apr11 19:05', 0], ['Apr11 19:10', 0], ['Apr11 19:15', 0], ['Apr11 19:20', 0], ['Apr11 19:25', 0], ['Apr11 19:30', 0], ['Apr11 19:35', 0], ['Apr11 19:40', 0], ['Apr11 19:45', 0], ['Apr11 19:50', 0], ['Apr11 19:55', 0], ['Apr11 20:00', 0], ['Apr11 20:05', 0], ['Apr11 20:10', 0], ['Apr11 20:15', 0], ['Apr11 20:20', 0], ['Apr11 20:25', 0], ['Apr11 20:30', 0], ['Apr11 20:35', 0], ['Apr11 20:40', 0], ['Apr11 20:45', 0], ['Apr11 20:50', 0], ['Apr11 20:55', 0], ['Apr11 21:00', 765], ['Apr11 21:05', 751], ['Apr11 21:10', 766], ['Apr11 21:15', 778], ['Apr11 21:20', 0], ['Apr11 21:25', 0], ['Apr11 21:30', 0], ['Apr11 21:35', 0], ['Apr11 21:40', 0], ['Apr11 21:45', 765], ['Apr11 21:50', 1], ['Apr11 21:55', 0], ['Apr11 22:00', 0], ['Apr11 22:05', 0], ['Apr11 22:10', 0], ['Apr11 22:15', 0], ['Apr11 22:20', 0], ['Apr11 22:25', 0], ['Apr11 22:30', 0], ['Apr11 22:35', 0], ['Apr11 22:40', 0], ['Apr11 22:45', 0], ['Apr11 22:50', 0], ['Apr11 22:55', 0], ['Apr11 23:00', 0], ['Apr11 23:05', 0], ['Apr11 23:10', 0], ['Apr11 23:15', 0], ['Apr11 23:20', 0], ['Apr11 23:25', 0], ['Apr11 23:30', 0], ['Apr11 23:35', 0], ['Apr11 23:40', 0], ['Apr11 23:45', 0], ['Apr11 23:50', 0], ['Apr11 23:55', 0], ['Apr12 00:00', 0], ['Apr12 00:05', 0], ['Apr12 00:10', 0], ['Apr12 00:15', 0], ['Apr12 00:20', 0], ['Apr12 00:25', 0], ['Apr12 00:30', 0], ['Apr12 00:35', 0], ['Apr12 00:40', 0], ['Apr12 00:45', 0], ['Apr12 00:50', 0], ['Apr12 00:55', 607], ['Apr12 01:00', 7040], ['Apr12 01:05', 6787], ['Apr12 01:10', 6992], ['Apr12 01:15', 7001], ['Apr12 01:20', 1], ['Apr12 01:25', 0], ['Apr12 01:30', 0], ['Apr12 01:35', 0], ['Apr12 01:40', 1138], ['Apr12 01:45', 7083], ['Apr12 01:50', 55], ['Apr12 01:55', 15], ['Apr12 02:00', 0], ['Apr12 02:05', 0], ['Apr12 02:10', 0], ['Apr12 02:15', 0], ['Apr12 02:20', 0], ['Apr12 02:25', 0], ['Apr12 02:30', 0], ['Apr12 02:35', 0], ['Apr12 02:40', 0], ['Apr12 02:45', 0], ['Apr12 02:50', 0], ['Apr12 02:55', 0], ['Apr12 03:00', 0]
        ]);

        var options = {
            title: '',
            legend: { position: 'none' },
            areaOpacity: 1.0,
            chartArea: { width: "75%", height: "75%" }
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_core'));
        chart.draw(data, options);
    }
</script>

我的角度控制器看起来像这样

 $scope.initialiseGraphs = function () {
        parentScope.disableControls = true;
        $scope.disableControls = true;
        $scope.isBusy = true;

        ComputeJobService.getRunData($scope.jobId)
            .then(function(response, status, headers, config) {
                if (response.data && response.data.data) {
                    renderRunChart(response.data.data);
                }
            })

然而,当我运行此操作时,我收到错误

Unhandled exception at line 11594, column 11 in http://localhost:58270/Scripts/angular.js

0x80070005 - JavaScript runtime error: Access is denied.

If there is a handler for this exception, the program may be safely continued.

首先,我是以正确的方式做这件事的吗?如果没有,那我该怎么做呢?

更新:似乎抛出拒绝访问的行是

var data = google.visualization.arrayToDataTable([

0 个答案:

没有答案