Google-Chart-angularjs支持"date"类型吗?
Does Google-Chart-angularjs support "date" type?
我正在使用 angular-google-图表 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", message: "c[Me] is not a function
当我查看文档时 https://developers.google.com/chart/interactive/docs/datesandtimes,
似乎支持日期类型。我错过了什么吗?在哪里可以找到 angular-google-chart 的准确文档?到目前为止的示例似乎都是代码示例的形式。
以下示例演示如何使用 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>
我正在使用 angular-google-图表 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", message: "c[Me] is not a function
当我查看文档时 https://developers.google.com/chart/interactive/docs/datesandtimes, 似乎支持日期类型。我错过了什么吗?在哪里可以找到 angular-google-chart 的准确文档?到目前为止的示例似乎都是代码示例的形式。
以下示例演示如何使用 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>