Chart.js：不同的数据集大小

Question

我需要显示我认为很常见的用例：折线图显示例如涵盖一周的每日和每小时平均值。

一个数据集显然有7个数据点，另一个有168个。

我找不到允许这样做的示例或记录的选项。当然 - 我几乎可以配置任何关于外观和感觉的东西，但是当涉及到数据大小时，两个数据集都应该具有与标签一样多的数据点。

我只想为数据点较少的数据集添加标签（在这个例子中：每日平均值），而另一个（168 个数据点）只会画一条细线，不应该在图表（无竖线等）[=11=]

Chart.js可以吗？

Answer 1

只要您的数据集中至少有 1 个可以使用备用 scatter chart dataset. Let me walk you through an example where I show the daily avg as bars and the hourly avg as a line (aka, a mixed chart type).

来表达，您所描述的内容实际上可以用 chart.js 实现

首先，为一周中的每一天配置一个带有标签的条形图，并提供数据的每日平均值作为您的第一个数据集。

接下来，创建另一个数据集，但将其 type 属性设置为 'line'。由于我们想要使用不同的 X 轴和一组不同的标签，因此您必须使用 {x: 0, y: 2} 符号来表达您的数据。这将允许您绕过使用上面定义的标签的比例。

最后，在您的 options.scales 配置中，定义 2 xAxes 比例并将您的第二个数据集关联到第二个 X 轴比例（同时将其 display 属性设置为false 所以你看不到任何第二个刻度）。

您最终得到的图表配置如下所示。

var ctx = document.getElementById("canvas").getContext("2d");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    datasets: [{
      type: 'bar',
      label: 'Daily Avg',
      backgroundColor: chartColors.red,
      data: dailyAvgData,
      borderColor: 'white',
      borderWidth: 2
    }, {
      type: 'line',
      label: 'Hourly Avg',
      borderColor: chartColors.green,
      backgroundColor: chartColors.green,
      borderWidth: 1,
      fill: false,
      pointRadius: 0,
      xAxisID: 'x-axis-2',
      data: hourlyAvgData
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Chart.js - Combo Chart With Multiple Scales (X Axis)'
    },
    tooltips: {
      mode: 'nearest',
      intersect: true
    },
    scales: {
      xAxes: [{}, {
        id: 'x-axis-2',
        type: 'linear',
        position: 'bottom',
        display: false,
      }],
      yAxes: [{
        ticks: {
          min: 0,
          max: 50
        }
      }]
    }
  }
});

您可以在此 codepen.

看到它的实际效果

这是另一个示例，但不是使用组合图表（每日是条形图，每小时是折线图），两个图都是折线图。方法完全相同，只是图表类型从 bar 更改为 line。

请注意，在这个版本中，我将每日平均线调整了一个，以便将点绘制在 "end of the day" 处。前面的示例显示的是每天开始时的每日平均值（这在技术上是不正确的）。

这里有一个example codepen演示图表的线版本。

Answer 2

在搜索如何在 Chart.js 中实现移动平均线后登陆这里，我一直在努力完全理解@jordanwillis 的答案，所以也许这对其他人也有用。

中心思想是您可以分配一种数据格式（对于 datasets 中的每个数据集），这样 y 组件代表系列的值，而 x - 恕我直言，这是关键点 - 匹配要绘制该特定点的标签（在独特的通用 labels 数组中，这将是所有系列的共享 x 轴，即数据集）。 =16=]

因此，我的 N 移动平均线（比如 7 天移动平均线）和 S 在 0 和 N-1（例如 3）之间的一般不对称移动的示例将是

var valuesMean7 = movingAverage(7, 3, ydata, xlabels);

我定义的地方：

function movingAverage(N, shift, values, labels) {
    var NN = values.length;
    var valuesMean = [];
    rightShift = N - shift - 1;
    for (let i = shift; i < NN - rightShift; i++) {
        var mean = 0;
        for (let j = i - shift; j < i - shift + N; j++) {
            mean += values[j];
        }
        mean = mean / N;
        valuesMean.push({
            x: labels[i],
            y: mean
            });
    }
    return valuesMean;
}

Chart.js：不同的数据集大小

Chart.js: different dataset size

line

moving-average

chart.js