1

Я использую angular-google-chart https://github.com/angular-google-chart/angular-google-chart.Поддерживает ли Google-Chart-angularjs тип «дата»?

Приведенный ниже код работает, и диаграмма загружается.

x_axis = {id: "t", label: "Date", type: "string"}; 
y_axis = {id: "s", label: "Value (%)", type: "number"};    

ChartObj.data = 
      {"cols": [ 
       horizontal_axis, 
       vertical_axis 
      ], 
       "rows": [ 
        {c:[{v: 1},{v: 98}]},{c:[{v: 2},{v: 90}]},{c:[{v: 3},{v: 120} ]} 
       ] 
      };   

Если изменить x_axis от строки к типу даты;

x_axis = {id: "t", label: "Date", type: "date"}; 

Диаграмма не загружается и появляется ошибка.

Google-визуализация-ошибки-0" , сообщение: «С [Me] не является функцией

Когда я проверил документацию https://developers.google.com/chart/interactive/docs/datesandtimes, типа дата, похоже, поддерживается. Я что-то пропустил? Где можно найти точную документацию для углового-google-диаграммы? До сих пор примеры представляются в виде примеров кода.

ответ

2

В следующем примере показано, как указать даты с помощью Google Chart Tools AngularJS Directive Module:

angular.module("chartApp", ["googlechart"]) 
 
.controller("GenericChartCtrl", function ($scope) { 
 
    $scope.chartObject = {}; 
 

 
    $scope.chartObject.type = "BarChart"; 
 

 

 
     $scope.chartObject.data = { 
 
      "cols": [ 
 
       { id: "s", label: "Date", type: "date" }, 
 
       { id: "t", label: "Precipitation (mm)", type: "number" }, 
 
      ], 
 
      "rows": [ 
 
       { 
 
        c: [ 
 
         { v: new Date(2000, 0, 1) }, 
 
         { v: 40 }, 
 
        ] 
 
       }, 
 
       { 
 
        c: [ 
 
         { v: new Date(2000, 1, 2) }, 
 
         { v: 50 }, 
 
        ] 
 
       }, 
 
       { 
 
        c: [ 
 
         { v: new Date(2000, 2, 1) }, 
 
         { v: 35 }, 
 
        ] 
 
       }, 
 
       { 
 
        c: [ 
 
         { v: new Date(2000, 3, 1) }, 
 
         { v: 30 }, 
 
        ] 
 
       } 
 
      ] 
 
     }; 
 

 
    $scope.chartObject.options = { 
 
     'title': 'AVERAGE MONTHLY PRECIPITATION OVER THE YEAR (RAINFALL, SNOW)', 
 
     vAxis: { 
 
      format: 'MMM', //display month part 
 
     }, 
 
    }; 
 
});
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.18/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-chart/0.0.11/ng-google-chart.js"></script> 
 

 
<body ng-app='chartApp' ng-controller="GenericChartCtrl"> 
 
    <div google-chart chart="chartObject" style="height:600px; width:100%;"></div> 
 
</body>

Смежные вопросы