Chart.js 折线图，每个数据集都有不同的标签

2022-01-22 00:00:00 charts javascript chart.js

使用 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 轴上的时间排序.Chart.js 有可能吗?

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").

希望这会有所帮助.

相关文章