每个数据集具有不同标签的Chart.js线图 [英] Chart.js Line-Chart with different Labels for each Dataset

问题描述

使用 Chart.js ，您可以创建折线图，并且必须为此设置标签和数据集。例如：

Using Chart.js you can create line charts and for that you have to privde labels and datasets. for example:

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(75,192,192,0.4)",
            borderColor: "rgba(75,192,192,1)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(75,192,192,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: [65, 59, 80, 81, 56, 55, 40],
        }
    ]
};

这里的问题是您有固定数量的标签（在这种情况下为7）每个数据集需要提供7个数据条目。现在，如果您有未知数量的标签和数据条目怎么办？

The Problem here is that you have a fix amount of labels (7 in this case) and you also need to provide 7 data entries for each dataset. Now what if you have an unknown amount of labels and data entries?

如果一个数据条目包含一个数字和一个时间怎么办：

What if one data entry contains a number and a time:

Entry {
    number: 127
    time: 10:00
}

如果要在X轴上显示所有时间，而在Y轴上显示所有数字（按X轴时间排序）怎么办？

What if you want to show all times on the X-Axis and all Numbers on the Y-Axis sorted by the time on the X-Axis. Is that possible with Chart.js?

推荐答案

我今天也与此进行了斗争。
您需要对数据集更加具体。在折线图中，数据集是一个数组，该数组的每个元素代表图表上的一条线。一旦解决，Chart.js实际上非常灵活。您可以将一条线（数据集元素）绑定到x轴和/或y轴，您可以分别指定每条线。

I had a battle with this today too. You need to get a bit more specific with your dataset. In a line chart "datasets" is an array with each element of the array representing a line on your chart. Chart.js is actually really flexible here once you work it out. You can tie a line (a dataset element) to an x-axis and/or a y-axis, each of which you can specify in detail.

如果我们在图表上坚持一条直线，并且您希望条目的时间部分沿着底部（x轴），那么您所有的时间都可以进入标签数组，而您的数字在y轴上精确定位。为简单起见，无需使用x和y轴指定自己的比例并给出以下数据：

In your case if we stick with a single line on the chart and you want the "time" part of the entry to be along the bottom (the x-axis) then all your times could go into the "labels" array and your "number" would be pin-pointed on the y-axis. To keep it simple without specifying our own scales with x and y axes and given this data:

var MyData = [{time:"10:00", number: "127"},
              {time:"11:00", number: "140"},
              {time:"12:00", number: "135"},
              {time:"13:00", number: "122"}];

您可以将图表的数据属性设置为：

You could set up the "data" property of your chart to be:

var data = {
    labels: ["10:00", "11:00", "12:00", "13:00"],
    datasets: [
        {
            label: "My First dataset",

            // Insert styling, colors etc here

            data: [{x: "10:00", y: 127},
                   {x: "11:00", y: 140},
                   {x: "12:00", y: 135},
                   {x: "13:00", y: 122}]
        }
    ]};

请注意，数据数组现在更加具体，每个数据元素都在x上绘制通过引用其中一个标签而不是原始数字来定位。现在，您可以按照此模式在数据集数组中放置另一个数据集对象，并有两行，显然可以为您的行提供不同的颜色和名称（标签）。

Note that the data array is now a bit more specific with each element of data plotting itself on the x-axis by referencing one of the labels rather than just being a raw number. You can now put another dataset object in the datasets array following this pattern and have two lines, obviously give your lines different colours and names ("label").

希望这样做帮助。

这篇关于每个数据集具有不同标签的Chart.js线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！