javascript - Angular 图表无法让标签按我需要的方式工作

Question

我正在创建一个带有 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]。

我使用以下内容作为图表的基础:

http://jtblin.github.io/angular-chart.js/#getting_started

Answer 1

Angular-chart 基于 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，它在调用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/