Я создаю диаграмму с угловыми диаграммами, и у меня проблемы с получением диаграммы, как мне нужно.
Я хотел бы, чтобы ось 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({date: d, name: clientName});
результат говорит только [Object, Object].
В качестве основы для диаграмм я использую следующее:
угловая диаграмма основана на Chart.js. Chart.js ожидает массив строк для меток. Когда вы вставляете объект Chart.js, он преобразует его в строку, используя toString, которая для объекта становится [Object, Object], когда toString не определена.
Это довольно просто получить то, что вы хотите, построив правильный объект и установив опцию.
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, который возвращает метку оси, когда вызывается toString. Мы также переопределяем tooltipTemplate для возврата tooltipLabel при построении всплывающей подсказки
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/