Chart.js的直角坐标系 [英] cartesian coordinate system with chart.js

问题描述

我正在尝试使用chart.js创建笛卡尔坐标系(即用于坐标几何).该文档实际上指出了笛卡尔坐标轴".但我看不到有任何证据表明这样的名字是必要的.我的图表如下:

I'm trying to create a cartesian coordinate system (i.e. for coordinate geometry) using chart.js. The documentation actually states "cartesian axes" but I'm not seeing any evidence that such a name is warranted. My chart is as follows:

    <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).就像任何其他普通图表一样，它们也偏向侧面.有人知道如何移动轴吗?

Problem right now is that the axes aren't passing through the origin (0,0). They are set off to the side just like any other ordinary chart. Does anyone know how to move the axes?

我尝试设置轴的位置，但是唯一的选项是顶部"，底部"，左侧"和右侧".没有'middle'，'center'，'origin'等.我也尝试设置标签偏移量，但是它没有沿正确的方向移动(x标签沿x方向移动，y标签沿y方向移动-我则需要相反的操作)，而这只会移动标签.

I tried setting the position of the axes but the only options are 'top', 'bottom', 'left' and 'right'. There is no 'middle', 'center', 'origin', etc. I also tried setting a label offset but this doesn't move in the right direction (x labels move in x direction, y labels move in y direction - I need the opposite) and this is only moving the labels anyway.

推荐答案

您可以使用插件核心API ，该插件提供了一系列可用于执行自定义代码的钩子.例如，在 beforeDraw 中，您可以计算并设置

You can use the 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 of both axes in order to move the ticks to the desired position.

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

请查看您修改后的代码，并查看其工作原理.

Please take a look at your amended code and see how it works.

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的直角坐标系的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！