Javascript Chart.js在折线图中绘制数字X和Y时出现问题

我有下面的代码使用Chart.js显示图表

<canvas id="canvasline" width="200" height="200"></canvas>

<script>
var ctx = document.getElementById('canvasline').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['0', '30', '50'],
    datasets: [{
      data: [
        { x: "0", y: 0 },
        { x: "10", y: 10 },
        { x: "20", y: 20 },
        { x: "30", y: 30 },
        { x: "40", y: 40 },
        { x: "50", y: 50 },
      ],
      borderWidth: 1
    }]
  },
  options: {
      legend: {
        display: false
      },
      scales: {
      yAxes: [{
        ticks: {
          display: true,
          suggestedMin: 0,
          suggestedMax: 100,
          maxTicksLimit: 10
        },        
        gridLines: {
          display: true
        }
      }],
      xAxes: [{
        ticks: {
          display: true,
          suggestedMin: 0,
          suggestedMax: 100,
          maxTicksLimit: 3
        },        
        gridLines: {
          display: true
        }
      }]
    }
  }
});
</script>

var ctx=document.getElementById（'canvasline'）.getContext（'2d'）；
var myChart=新图表（ctx{
键入：“行”，
数据：{
标签：['0'，'30'，'50']，
数据集：[{
数据：[
{x:“0”，y:0}，
{x:“10”，y:10}，
{x:“20”，y:20}，
{x:“30”，y:30}，
{x:“40”，y:40}，
{x:“50”，y:50}，
],
边框宽度：1
}]
},
选项：{
图例：{
显示：假
},
比例：{
雅克斯：[{
滴答声：{
显示：对，
建议分钟：0，
建议最大值：100，
马克斯：10
},        
网格线：{
显示：真
}
}],
xAxes：[{
滴答声：{
显示：对，
建议分钟：0，
建议最大值：100，
马克斯：3
},        
网格线：{
显示：真
}
}]
}
}
});

工作代码示例：

我面临以下问题：

对于X轴标签“30”，我看到显示X数据“10”

在运行时，我得到一个带有X和Y值的JSON数组作为数组，我想在图上绘制这个X和Y数字，我应该如何实现它

---

当数据被指定为通过包含

x

和

y

属性的对象时，不应定义

data.labels

还要确保

x

和

y

值是数字而不是字符串

请看下面的修改代码，它使用了Chart.js（2.9.3）的最新稳定版本

var ctx=document.getElementById（'myChart'）.getContext（'2d'）；
var myChart=新图表（ctx{
键入：“散布”，
数据：{
数据集：[{
数据：[
{x:0，y:0}，
{x:10，y:10}，
{x:20，y:20}，
{x:30，y:30}，
{x:40，y:40}，
{x:50，y:50}
],
秀行：没错，
填充：假，
边框宽度：1
}]
},
选项：{
图例：{
显示：假
},
比例：{
雅克斯：[{
滴答声：{
建议分钟：0，
建议最大值：100，
马克斯：10
}
}],
xAxes：[{
滴答声：{
建议分钟：0，
建议最大值：100，
马克斯：3
}
}]
}
}
});

您应该使用散点图，而不是折线图。将
类型
更改为
分散
。根据文档：“散点图基于基本折线图，x轴更改为线性轴。”否则，您的x轴点将被视为分类变量，没有任何线性比例。但散点也会添加数据点，有没有办法避免散点？另外，我应该如何将X，Y数据动态添加到char中？