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

Question

我需要显示我认为是一个非常常见的用例:一个折线图,显示例如一周的每日和每小时平均值.

一个数据集显然有7个数据点,另一个有168个数据点.

我无法找到允许这样做的示例或文档选项.当然 - 我几乎可以配置任何外观和感觉,但是当涉及到数据大小时,两个数据集都应该有与标签一样多的数据点.

我想只为数据点较少的数据集(在本例中为每日平均值)设置标签,而另一个(168个数据点)只绘制一条细线,不应在图表中添加其他值(没有垂直条)等等.)

Chart.js有可能吗？

Answer 1

只要至少有一个数据集可以使用备用散点图数据集表示,您实际上可以使用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.

请注意,在此版本中,我已将每日平均线调整为1,以便将点绘制在"当天结束".前面的例子显示了每天开始时的每日平均值(这在技术上是不正确的).

这是一个示例代码,用于演示图表的行版本.