ChartJS - 删除轴？答案

【问题标题】：ChartJS - remove axis?ChartJS - 删除轴？
【发布时间】：2015-03-02 15:16:48
【问题描述】：

使用 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

【问题讨论】：

标签： javascript chart.js

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

我在 Chart.js 的第 1600 行发现了这个：

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

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

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

我在 Y 轴下方做了一些非常相似的操作，然后我注释掉了沿每个轴绘制微小 5 像素破折号的代码。如果有人知道此配置选项，请分享。

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

【讨论】：

【解决方案3】：

@Rich Dominelli 的答案对于chart.js 是正确的v2.xx

chart.js v3.xx 消除轴的代码：

（不向后兼容 v2.xx）

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

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

下面的sn-p中没有轴的折线图的完整代码示例如下，您可以运行：

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>

【讨论】：