带有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?

我尝试设置轴的位置，但唯一的选项是顶部"、底部"、左侧"和右侧".没有中间"、中心"、原点"等.我也尝试设置标签偏移，但这并没有朝正确的方向移动(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 中，您可以计算和设置 ticks.padding 以便将 ticks 移动到所需位置.

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屋！