散点图的中心原点

问题描述

我阅读了文档，并在Google上进行了搜索，但是找不到找到原点居中的方法。

我想要的是中间有（0,0），黑点位于右上角（或多或少）。

有可能这样做吗？

解决方法

设置轴的最小和最大范围，以使它们从负向正延伸。这会将（0，0）放在中间。

下面的示例代码：

const ctx = document.getElementById('myChart').getContext('2d');

new Chart(ctx,{
  type: 'scatter',data: {
    datasets: [{
      label: 'Data One',borderColor: 'black',backgroundColor: 'black',data: [{
        x: 7,y: 27,}],},options: {
    scales: {
      xAxes: [{
        ticks: {
          min: -30,max: 30,],yAxes: [{
        ticks: {
          min: -30,});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js" integrity="sha512-QEiC894KVkN9Tsoi6+mKf8HaCLJvyA6QIRzY5KrfINXYuP9NxdIkRQhGq3BZi0J4I7V5SidGM3XUQ5wFiMDuWg==" crossorigin="anonymous"></script>

<body>
  <canvas id="myChart" width="600" height="400"></canvas>
</body>

您可以使用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',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: [{x:7,y:27}],backgroundColor: 'black'
    }]
  },stepSize: 5,callback: v => v == 0 ? '' : v
        },gridLines: {
          drawTicks: false
        }        
      }],gridLines: {
          drawTicks: false
        } 
      }]
    }
  }
});

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

vue-chartjs