带有chart.js的笛卡尔坐标系答案

【问题标题】：cartesian coordinate system with chart.js带有chart.js的笛卡尔坐标系
【发布时间】：2020-07-31 19:45:59
【问题描述】：

我正在尝试使用 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>

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

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

【问题讨论】：

标签： chart.js axes coordinate-systems cartesian-coordinates

【解决方案1】：

您可以使用Plugin Core API，它提供了一系列可用于执行自定义代码的挂钩。以beforeDraw 为例，您可以计算并设置两个轴的ticks.padding，以便将ticks 移动到所需位置。

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;
}

请查看您修改后的代码，看看它是如何工作的。

new Chart('myChart', {
  type: 'scatter',
  plugins:[{
    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;
    }
  }],
  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}],
      borderColor: 'red'
    }]
  },
  options: {
    scales: {
      xAxes: [{
        ticks: {
          min: -6,
          max: 6,
          stepSize: 1,
          callback: v => v == 0 ? '' : v
        },
        gridLines: {
          drawTicks: false
        }        
      }],
      yAxes: [{
        ticks: {
          min: -6,
          max: 6,
          stepSize: 1,
          callback: v => v == 0 ? '' : v
        },
        gridLines: {
          drawTicks: false
        } 
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

【讨论】：