Question

是否可以传递一个对象数组而不是一个整数数组？以下代码有效，但结果为零线：

var ctx = document.getElementById("a").getContext("2d");
var data = {
    labels: ["Fri", "Sat", "Sun"],
    datasets: [{
    label: "Chart B",
    fillColor: "rgba(220,220,220,0.2)",
    strokeColor: "rgba(150,150,150,1)",
    pointColor: "rgba(150,150,150,1)",
    pointStrokeColor: "#fff",
    pointHighlightFill: "#fff",
    pointHighlightStroke: "rgba(220,220,220,1)",
    data: [{
                y: 48,
                name: "Value one",
                date: "2015-04-30"
            }, {
                y: 40,
                name: "Value two",
                date: "2016-05-30"
            }, {
                y: 19,
                name: "Value three",
                date: "2016-06-30"
            } ]
    }]
};

var Chart = new Chart(ctx).Line(data);

Answer 1

简而言之，我认为你的榜样应该有效。关键是使用y作为图表中的y值，并将任意属性添加到对象中。

看起来这就是你正在做的事情，但你已经报道它不起作用了......但它对我有用！？

更长的答案

根据docs for Line，data可以是Number[]：

data: [20, 10]

...但它也可以是Point[]：

data: [{
        x: 10,
        y: 20
    }, {
        x: 15,
        y: 10
    }]

这旨在用于稀疏填充的数据集。通过实验，我发现您可以省略x属性并只指定y属性。像往常一样推断x值。

您还可以添加可从标签回调中访问的任何其他任意属性。所以，你最终会得到这样的东西：

data: [{
        y: 20,
        myProperty: "Something"
    }, {
        y: 10,
        myProperty: "Something Else"
    }]

Answer 2

我可以确认@rinogo给出的答案适用于最新版本。您可以将自定义属性添加到数据集，然后在工具提示中或其他地方使用'em。

首先将数据添加到数据集。就我而言，我只有一套，所以我只是在推分数。

chartData.datasets[0].data.push({
    y: groupedBooking.distinctCount,
    distinctUsers: distinctUsers
});

...，最后使用chartOptions覆盖回调：

options: {
    tooltips: {
        callbacks: {
            label(tooltipItem, data) {
                console.log(data);
                return data.datasets[0].data[tooltipItem.index].distinctUsers;
            }
        }
    }
}

如果您碰巧有多个数据集，也可以从tooltipItem中获取数据集索引...以便确认，可以从数据点中省略X，并将客户属性保留在对象中。

Chart.js：将对象而不是int值作为数据传递

2 个答案: