javascript - 如何使用两个列表中的数据创建 Chart.js 散点图

Question

我想使用两个列表中的数据在 Chart.js 中创建一个散点图。第一个列表中的数据应该是 x 值，而第二个列表中的数据应该是 y 值。

我尝试了以下方法，但不起作用。有什么方便的方法可以解决我的问题吗？

var myChart = new Chart(ctx, {
    type: 'scatter',
    data: {
        datasets: [{
            label: 'Scatter Dataset',
            data: [{
                x: pvols, # first list
                y: prets  # second list
            }]
        }]
    },
    options: {
        scales: {
            xAxes: [{
                type: 'linear',
                position: 'bottom'
            }]
        }
    }
});

或者，有人知道如何重新格式化我的数据以适应所需的格式吗？

感谢和亲切的问候

马塞尔

Answer 1

来自docs要使用散点图，数据必须作为包含 X 和 Y 属性的对象传递。

您必须确保您传递的列表采用正确的格式才能被散点图接受，即

var data = [{ x: -8, y: 3 }, { x: 2, y: 8 }, { x: 3, y: 9 }];

我会将您的两个列表合并为一个对象，然后将其传递到图表。

let coords = pvols.map( (v,i) => ({ x: v, y: prets[i] }) )

然后在初始化图表时传递它

var data = [{ x: -8, y: 3 }, { x: 2, y: 8 }, { x: 3, y: 9 }];

var ctx = document.getElementById("chart");
var scatterChart = new Chart(ctx, {
  type: "scatter",
  data: {
    datasets: [
      {
        label: "Scatter Dataset",
        data: data
      }
    ],
    options: {
      scales: {
        xAxes: [
          {
            type: "linear",
            position: "bottom"
          }
        ]
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script>
<canvas id="chart" height="450" width="600"></canvas>