ChartJS - remove axis?

ChartJS - remove axis?

本文关键字：axis remove ChartJS      更新时间：2023-09-26

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

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

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

这里有一个粗略的解决方案：

我在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像素短划线的代码。如果有人知道这方面的配置选项，请分享。

此外，我想我可以将线条笔划/填充颜色设置为与背景颜色相同。。。

@Rich Dominelli的回答对于chart.jsv2.xx是正确的

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

（与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
    }
  }
};

下面的代码片段中没有轴的折线图的完整代码示例可以运行：

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>

相关文章：