Javascript 带条的图表

我需要在散点图中使用垂直条，但尽管没有错误，但这些条永远不会出现

new Chart(ctx, 
{
    type: 'scatter',
    labels: xAxisValues,
    data: 
    {
        datasets:
        [
            {
                type: 'bar',
                label: 'Label nº A',
                backgroundColor: '#000',
                borderWidth: 2,
                fill: false,
                data: barValues,
                yAxisID: 'A'
            },
            {
                type: 'line',
                label: 'Label nº B',
                backgroundColor: '#cc99ff',
                data: lineValues,
                yAxisID: 'B',
                pointRadius: 0,
            }
        ]
    }
});

正如您在本文中所看到的，如果我从

bar

切换到

line

，它就会工作。在我看来，这些条无法接收我传递的属性

xy

，如下所示：

var barValues = 
[
    {x: 393, y: 1},
    {x: 401, y: 2},
    {x: 409, y: 7},
    {x: 417, y: 4},
    {x: 425, y: 0},
    {x: 433, y: 3},
    {x: 441, y: 2},
    {x: 449, y: 1},
    {x: 457, y: 0}
];

---

但是如何在散点图中设置条形图呢？

在垂直条形图中，单个条形图均匀分布在x轴上的可用空间中。因此，为了与折线图同步，条形图数据数组应具有相同数量的条目。除了几个条形位置外，所有这些值都将为零。这可以通过创建条形图数据时使用的以下函数获得

function barValue(x) {
    for (let barValue of barValues) {
    if (Math.floor(x) == barValue.x) {
      return barValue.y;
    }
  }
  return 0;
}
...

data: lineValues.map(v => barValue(v.x)),

请看一看这个例子，它说明了如何解决这个问题