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>

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

1 个答案: