chart.js 笛卡尔坐标系

Question

我正在尝试使用 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)。就像任何其他普通图表一样，它们被放在一边。有谁知道如何移动轴？

我尝试设置轴的位置，但唯一的选项是 'top'、'bottom'、'left' 和 'right'。没有 'middle'、'center'、'origin' 等。我也尝试设置标签偏移量，但这并没有向正确的方向移动（x 标签在 x 方向移动，y 标签向 y 方向移动 - 我需要相反的方向），这只是移动标签。

Answer 1

您可以使用两个轴的 Plugin Core API that offers a range of hooks that may be used for performing custom code. In the beforeDraw for example, you can compute and set the 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>

chart.js 笛卡尔坐标系

cartesian coordinate system with chart.js

chart.js

axes

coordinate-systems

cartesian-coordinates