Chart.js 3.x无法在图表上显示数据

如何解决Chart.js 3.x无法在图表上显示数据

我有使用chart.js 3.x的以下图表。
https://jsfiddle.net/7oxmesnj/1/

我具有以下图表配置：

var options = {
  type: 'scatter',data: {
    labels: ["Red","Blue","Yellow","Green","Purple","Orange"],datasets: [
        {
          label: '# of Votes',data: [12,19,3,5,2,3],borderWidth: 0,showLine: true,},{
                label: '# of Points',data: [7,11,8,7],}
        ]
  },options: {
    scales: {
        y:{
        type: 'linear',min: 0,max: 500,ticks: {
          stepSize: 100,reverse: false
        }
      },x:{
        type: 'linear',reverse: false
        }
      }

    }
  }
}

我无法在散点图上绘制数据。
我遵循了迁移行会，但是图表上仍然没有数据。
https://www.chartjs.org/docs/master/getting-started/v3-migration

解决方法

您应该将数据集更改为具有成对的数字（x，y）。 See documentation。

var options = {
  type: 'scatter',data: {
    labels: ["Red","Blue","Yellow","Green","Purple","Orange"],datasets: [{
      label: '# of Votes',data: [{x:12,y:7},{x:19,y:11},{x:3,y:5},{x:5,y:8},{x:2,y:3},y:7}],borderWidth: 1,showLine: true,pointBackgroundColor: 'red',borderColor: 'blue',backgroundColor: 'blue',}]
  },}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx,options);

canvas {
  background-color: #eee;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta/chart.min.js"></script>

<canvas id="chartJSContainer" width="600" height="400"></canvas>

,

代码中的主要问题是x轴的定义。 x轴表示labels，它是字符串。因此，您不能定义数字min，max和ticks.stepSize选项。

为了获得具有给定数据的散点图，可以将其type更改为'line'并在每个数据集上定义showLine: false。

请在下面查看您的修改后的代码。我改变了y

var options = {
  type: 'line',datasets: [{
        label: '# of Votes',data: [12,19,3,5,2,3],fill: false,showLine: false
      },{
        label: '# of Points',data: [7,11,8,7],showLine: false
      }
    ]
  },options: {
    scales: {
      y: {
        min: 0,max: 50,ticks: {
          stepSize: 10
        }
      }
    }
  }
};

new Chart('chartJSContainer',options);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta/chart.min.js"></script>
<canvas id="chartJSContainer"></canvas>