Google-Chart-angularjs 是否支持“日期”类型？答案

【问题标题】：Does Google-Chart-angularjs support "date" type?Google-Chart-angularjs 是否支持“日期”类型？
【发布时间】：2015-10-23 07:33:16
【问题描述】：

我正在使用 angular-google-chart https://github.com/angular-google-chart/angular-google-chart。

下面的代码有效，图表加载完毕。

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-visualization-errors-0”，消息：“c[Me] 不是函数

当我查看文档https://developers.google.com/chart/interactive/docs/datesandtimes时，日期类型似乎确实受支持。我错过了什么吗？在哪里可以找到 angular-google-chart 的准确文档？到目前为止的示例似乎都是代码示例的形式。

【问题讨论】：

标签： javascript angularjs google-visualization

【解决方案1】：

以下示例演示如何使用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>

【讨论】：