Angular 图表无法让标签按我需要的方式工作
Angular Charts cannot get labels working how i need
我正在用 angular 个图表创建一个图表,但在获取我需要的图表时遇到了问题。
我希望 x 轴有日期,鼠标悬停在上面以显示客户端名称,这些都是从资源对象数组的循环中获取的。
这是循环:
angular.forEach(charts, function(chart, key) {
var d = new Date(chart.appointment_date).toDateString();
$scope.labels.push(d);
$scope.total_earnings += chart.cost.dollars;
$scope.data[0].push(chart.cost.dollars);
if (!chart.refundObj[0]){
$scope.data[1].push(0);
} else {
$scope.data[1].push((chart.refundObj[0].amount/100));
}
});
但是这只会在 x 轴以及鼠标悬停时设置日期 属性。如果我使用以下方法创建一个对象:
$scope.labels.push({日期: d, 姓名: clientName});
结果只显示 [Object, Object]。
我使用以下作为图表的基础:
angular-图表基于Chart.js。 Chart.js 需要一个 字符串数组 作为标签。当您插入一个对象时,Chart.js 使用 toString 将其转换为字符串,当未定义 toString 时,该对象将变为 [Object, Object]。
通过构造正确的对象并设置一个选项,很容易得到你想要的东西。
HTML
<div ng-app="app">
<div ng-controller="ctrlr">
<canvas id="line" class="chart chart-line" data="data"
labels="labels" options="options"></canvas>
</div>
</div>
JS
这里我们构建了一个特殊的对象SpecialLabel,它return是调用toString时的轴标签。我们在构建tooltip
的时候也将tooltipTemplate重写为returntooltipLabel
var app = angular.module('app', ['chart.js']);
app.controller('ctrlr', ['$scope', function ($scope) {
var SpecialLabel = function (axisLabel, tooltipLabel) {
this.axisLabel = axisLabel;
this.tooltipLabel = tooltipLabel;
}
SpecialLabel.prototype.toString = function () {
return this.axisLabel
}
$scope.labels = [
new SpecialLabel("10-Jan", "Client 1"),
new SpecialLabel("11-Jan", "Client 2"),
new SpecialLabel("12-Jan", "Client 3"),
new SpecialLabel("13-Jan", "Client 4"),
new SpecialLabel("14-Jan", "Client 5"),
new SpecialLabel("15-Jan", "Client 6"),
new SpecialLabel("16-Jan", "Client 7")];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40]
];
$scope.options = {
tooltipTemplate: "<%if (label){%><%=label.tooltipLabel%>: <%}%><%= value %>"
}
}])
Fiddle - http://jsfiddle.net/xg2pd1cu/
我正在用 angular 个图表创建一个图表,但在获取我需要的图表时遇到了问题。
我希望 x 轴有日期,鼠标悬停在上面以显示客户端名称,这些都是从资源对象数组的循环中获取的。
这是循环:
angular.forEach(charts, function(chart, key) {
var d = new Date(chart.appointment_date).toDateString();
$scope.labels.push(d);
$scope.total_earnings += chart.cost.dollars;
$scope.data[0].push(chart.cost.dollars);
if (!chart.refundObj[0]){
$scope.data[1].push(0);
} else {
$scope.data[1].push((chart.refundObj[0].amount/100));
}
});
但是这只会在 x 轴以及鼠标悬停时设置日期 属性。如果我使用以下方法创建一个对象:
$scope.labels.push({日期: d, 姓名: clientName});
结果只显示 [Object, Object]。
我使用以下作为图表的基础:
angular-图表基于Chart.js。 Chart.js 需要一个 字符串数组 作为标签。当您插入一个对象时,Chart.js 使用 toString 将其转换为字符串,当未定义 toString 时,该对象将变为 [Object, Object]。
通过构造正确的对象并设置一个选项,很容易得到你想要的东西。
HTML
<div ng-app="app">
<div ng-controller="ctrlr">
<canvas id="line" class="chart chart-line" data="data"
labels="labels" options="options"></canvas>
</div>
</div>
JS
这里我们构建了一个特殊的对象SpecialLabel,它return是调用toString时的轴标签。我们在构建tooltip
的时候也将tooltipTemplate重写为returntooltipLabelvar app = angular.module('app', ['chart.js']);
app.controller('ctrlr', ['$scope', function ($scope) {
var SpecialLabel = function (axisLabel, tooltipLabel) {
this.axisLabel = axisLabel;
this.tooltipLabel = tooltipLabel;
}
SpecialLabel.prototype.toString = function () {
return this.axisLabel
}
$scope.labels = [
new SpecialLabel("10-Jan", "Client 1"),
new SpecialLabel("11-Jan", "Client 2"),
new SpecialLabel("12-Jan", "Client 3"),
new SpecialLabel("13-Jan", "Client 4"),
new SpecialLabel("14-Jan", "Client 5"),
new SpecialLabel("15-Jan", "Client 6"),
new SpecialLabel("16-Jan", "Client 7")];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40]
];
$scope.options = {
tooltipTemplate: "<%if (label){%><%=label.tooltipLabel%>: <%}%><%= value %>"
}
}])
Fiddle - http://jsfiddle.net/xg2pd1cu/