时间戳

首页 > 解决方案 > 散点图的中心原点

chart.js - 散点图的中心原点

问题描述

我阅读了文档，在 Google 上进行了搜索，但无法找到一种将原点居中的方法。

在此处输入图像描述

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

有可能这样做吗？

标签： chart.jsvue-chartjs

解决方案

设置轴的最小和最大范围，使它们从负向正扩展。这会将 (0, 0) 放在中间。

chart.js 居中散点轴

下面的示例代码：

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,
          max: 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>

推荐阅读