带chart.js的笛卡尔坐标系

我正在尝试使用chart.js创建笛卡尔坐标系（即坐标几何）。文档中实际上说明了“笛卡尔坐标轴”，但我没有看到任何证据证明这样的名称是正确的。我的图表如下：

    <canvas id="myChart" width="400" height="400"></canvas>
    <script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var scatterChart = new Chart(ctx, {
      type: 'scatter',
      data: {
        datasets: [{
            label: 'Scatter Dataset',
            data: [{x:-3,y:5},{x:-2,y:0},{x:-1,y:-3},{x:0,y:-4},{x:1,y:-3},
            {x:2,y:0},{x:3,y:5}]
        }]
      },
      options: {
        scales: {
          xAxes: [{
              type: 'linear',
          ticks: {
            stepSize: 1
          }
          }],yAxes: [{
              type: 'linear',
          ticks: {
            stepSize: 1
          }
          }]
        }
      }
    });
    </script>

var ctx=document.getElementById（'myChart'）.getContext（'2d'）；
var散点图=新图表（ctx{
键入：“散布”，
数据：{
数据集：[{
标签：“散布数据集”，
数据：[{x:-3，y:5}，{x:-2，y:0}，{x:-1，y:-3}，{x:0，y:-4}，{x:1，y:-3}，
{x:2，y:0}，{x:3，y:5}]
}]
},
选项：{
比例：{
xAxes：[{
类型：'线性'，
滴答声：{
步长：1
}
}]，雅克斯：[{
类型：'线性'，
滴答声：{
步长：1
}
}]
}
}
});

现在的问题是轴没有穿过原点（0,0）。它们像其他普通的图表一样被放在一边。有人知道如何移动轴吗

我尝试设置轴的位置，但唯一的选项是“顶部”、“底部”、“左侧”和“右侧”。没有“中间”、“中心”、“原点”等。我也尝试过设置标签偏移，但这没有朝正确的方向移动（x标签朝x方向移动，y标签朝y方向移动-我需要相反的方向）无论如何，这只是移动标签。

您可以使用，它提供了一系列钩子，可用于执行自定义代码。例如，在

beforeDraw

中，您可以计算并设置两个轴的间距，以便将

记号移动到所需位置

beforeDraw: chart => {
  var xAxis = chart.scales['x-axis-1'];
  var yAxis = chart.scales['y-axis-1'];
  const scales = chart.chart.config.options.scales;
  scales.xAxes[0].ticks.padding = yAxis.top - yAxis.getPixelForValue(0) + 6;
  scales.yAxes[0].ticks.padding = xAxis.getPixelForValue(0) - xAxis.right + 6;
}

请看一下你修改过的代码，看看它是如何工作的


新图表（“myChart”{
键入：“散布”，
插件：[{
绘制前：图表=>{
var xAxis=图表刻度['x轴-1']；
var yAxis=图表刻度['y轴-1']；
const scales=chart.chart.config.options.scales；
scales.xAxes[0].ticks.padding=yAxis.top-yAxis.getPixelForValue（0）+6；
scales.yAxes[0].ticks.padding=xAxis.getPixelForValue（0）-xAxis.right+6；
}
}],
数据：{
数据集：[{
标签：“散布数据集”，
数据：[{x:-3，y:5}，{x:-2，y:0}，{x:-1，y:-3}，{x:0，y:-4}，{x:1，y:-3}，{x:2，y:0}，{x:3，y:5}]，
边框颜色：“红色”
}]
},
选项：{
比例：{
xAxes：[{
滴答声：{
最小：-6，
最高：6，
步长：1，
回调：v=>v==0？“”：v
},
网格线：{
抽签：假
}        
}],
雅克斯：[{
滴答声：{
最小：-6，
最高：6，
步长：1，
回调：v=>v==0？“”：v
},
网格线：{
抽签：假
} 
}]
}
}
});