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时将其修改为始终为假，我认为这意味着我们在轴上：

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

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

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

Answer 2

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

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

Answer 3

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

是正确的

这里是chart.js v3.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 - 删除轴？

3 个答案:

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