个人中心
gpt4 book ai didi

javascript - AngularJS Google 图表 - 时间轴

转载 作者：行者123 更新时间：2023-12-03 07:45:46 28 4
gpt4 key购买 nike

在使用下面的代码使用 AngularJS 生成时间线图表时，我遇到了一个问题。

基本上我无法找到导入时间线包的正确方法。就像下面导入 corechart 包一样，我如何导入时间线...

google.load('visualization', '1', {packages: ['corechart']});

我尝试使用

<script type="text/javascript"  src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['timeline']}]}"></script>

但是它不起作用。

Controller 

"use strict";

/*We need to manually start angular as we need to
wait for the google charting libs to be ready*/  
google.setOnLoadCallback(function () {  
    angular.bootstrap(document.body, ['my-app']);
});
google.load('visualization', '1', {packages: ['corechart']});


var myApp = myApp || angular.module("my-app",["google-chart"]);

myApp.controller("IndexCtrl",function($scope){  
    $scope.data1 = {};
    $scope.data1.dataTable = new google.visualization.DataTable();
    $scope.data1.dataTable.addColumn("string","Name")
    $scope.data1.dataTable.addColumn("number","Qty")
    $scope.data1.dataTable.addRow(["Test",1]);
    $scope.data1.dataTable.addRow(["Test2",2]);
    $scope.data1.dataTable.addRow(["Test3",3]);
    $scope.data1.title="My Pie"

    $scope.data2 = {};
    $scope.data2.dataTable = new google.visualization.DataTable();
    $scope.data2.dataTable.addColumn("string","Name")
    $scope.data2.dataTable.addColumn("number","Qty")
    $scope.data2.dataTable.addRow(["Test",1]);
    $scope.data2.dataTable.addRow(["Test2",2]);
    $scope.data2.dataTable.addRow(["Test3",3]);


    $scope.data4 = {};
    $scope.data4.dataTable = new google.visualization.DataTable();
    $scope.data4.dataTable.addColumn({ type: 'string', id: 'President' })
    $scope.data4.dataTable.addColumn({ type: 'date', id: 'Start' })
    $scope.data4.dataTable.addColumn({ type: 'date', id: 'End' })
    $scope.data4.dataTable.addRows([[ 'Down',      new Date(1797, 2, 3,20.20),  new Date(1797, 2, 4,21.20) ],
          [ 'Jefferson',  new Date(1801, 2, 4,20.20),  new Date(1801, 2, 4,20.20) ]]);

    $scope.data3 = {};
    $scope.data3.dataTable = new google.visualization.DataTable();
    $scope.data3.dataTable.addColumn("string","Name")
    $scope.data3.dataTable.addColumn("number","Qty")
    $scope.data3.dataTable.addRow(["Test",1]);
    $scope.data3.dataTable.addRow(["Test2",2]);
    $scope.data3.dataTable.addRow(["Test3",3]);
});

HTML 页面

<!DOCTYPE html>  
<html lang="en">  
    <head>
         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js" type="text/javascript"></script>
         <script src="https://www.google.com/jsapi" type="text/javascript"></script>
         <script src="main.js" type="text/javascript"></script>
         <script src="ngGoogleCharts.js" type="text/javascript"></script>
         <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['timeline']}]}"></script>
         <style type="text/css">
             .bigGraph {width:500px;height:500px;float:left;}
             .mediumGraph {width:400px;height:400px;float:left;}
             .smallGraph {width:200px;height:200px;float:left;}
         </style>
    </head>
    <body ng-controller="IndexCtrl">
        <div google-chart="PieChart" ng-model="data1" class="bigGraph"></div>
        <div google-chart="BarChart" ng-model="data2" class="mediumGraph"></div>
        <div google-chart="LineChart" ng-model="data3" class="smallGraph"></div>
        <div google-chart="TimeLine" ng-model="data4" class="smallGraph"></div>
    </body>
</html>

ngGoogleCharts.js

"use strict";

var googleChart = googleChart || angular.module("google-chart",[]);

googleChart.directive("googleChart",function(){  
    return{
        restrict : "A",
        link: function($scope, $elem, $attr){
            var dt = $scope[$attr.ngModel].dataTable;

            var options = {};
            if($scope[$attr.ngModel].title)
                options.title = $scope[$attr.ngModel].title;
            console.log($scope[$attr.ngModel]+' \t envirName= ', $attr.googleChart+' Ele \t '+$elem[0]);
            var googleChart = new google.visualization[$attr.googleChart]($elem[0]);
            googleChart.draw(dt,options)
        }
    }
});

最佳答案

您很可能会收到错误，因为 google-chart 指令的值设置为 TimeLine 并且无法找到具有此类键的对象:

var googleChart = new google.visualization[$attr.googleChart]($elem[0]);

Timeline Google Chart 的类名称是 google.visualization.Timeline

因此，解决方案是将值从 TimeLine 替换为 Timeline:

<div google-chart="Timeline" ng-model="data4" class="smallGraph"></div>

Plunker

关于javascript - AngularJS Google 图表 - 时间轴，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35215957/

28 4 0
文章推荐： javascript - 为什么有些值可以通过 OR 运算符，而其他值则不能？
文章推荐： javascript - 2个自调用的javascript函数运行
文章推荐： javascript - 更改单选选项上的前缀货币符号
文章推荐： javascript - Phonegap/Cordova 中带有插件的多个 HTML 文件和文件夹？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com