ChartJS - 删除轴？

Question

使用ChartJS，我可以禁用水平轴和垂直轴吗？我可以使用这些选项，但它们不会特别影响轴：

//Boolean - Whether to show horizontal lines (except X axis)
scaleShowHorizontalLines: true,

//Boolean - Whether to show vertical lines (except Y axis)
scaleShowVerticalLines: true,

https://github.com/nnnick/Chart.js

Answer 1

这是一个粗略的解决方案：

我在 Chart.js 的第 1600 行附近找到了这个：

// This is X axis, so draw it
                if (index === 0 && !drawHorizontalLine){
                    drawHorizontalLine = true;
                }

我将其修改为在 index === 0 时始终为 false，我认为这意味着我们在一个轴上：

// This is X axis, so <don't> draw it
                if (index === 0 && drawHorizontalLine){
                    drawHorizontalLine = false;
                }

我对 Y 轴进一步做了一些非常相似的事情，然后我注释掉了沿每个轴绘制 5 像素小破折号的代码。如果有人知道这方面的配置选项，请分享。

此外，我想我可以将线条描边/填充颜色设置为与背景颜色相同...

Answer 2

不确定您使用的是哪个版本的 chartjs，但如果有人遇到这个问题，您可以使用 display: false 关闭 1 个或多个轴的显示，例如以下关闭 x 轴的显示。

  options: {
        scales: {
            xAxes: [{
                display: false
            }]
        }
    }

Answer 3

@Rich Dominelli 的回答对于 chart.js v2.xx

是正确的

此处代码为chart.jsv3.xx消除轴：

（不向后兼容 v2.xx）

对于那些感兴趣的人，请按照修改后的代码使用 chart.js v3.xx

option: {
  scales: {
    x: {  // <-- object '{' now, instead of array '[{' before
      display: false
    },
    y: {  // <-- object '{' now, instead of array '[{' before
      display: false
    }
  }
};

按照下面代码段中没有轴的折线图的完整代码示例，您可以运行:

const labels=["2021-08-02","2021-08-03","2021-08-04","2021-08-05","2021-08-06"];
const data_1=[39,41,42,43,43];
const data_2=[37,38,40,41,39];

const ctx=document.querySelector('canvas').getContext('2d');

const data = {
  labels: labels,
  datasets: [{
    label: 'Data 1',
    borderColor: 'grey',
    data: data_1
  }, {
    label: 'Data 2',
    borderColor: 'grey',
    data: data_2
  }]
};

const option = {
  scales: {
    x: {
      display: false
    },
    y: {
      display: false
    }
  }
};

const chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: option
});

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- gets you the latest version of Chart.js, now at v3.5.0 -->

<canvas width="640" height="480"></canvas>

ChartJS - 删除轴？

ChartJS - remove axis?

javascript

chart.js

此处代码为chart.jsv3.xx消除轴：