在 chart.js 中，如果从移动设备访问，是否可以隐藏条形图的 x 轴 label/text？

Question

在chart.js中，如果从移动设备访问，是否可以隐藏条形图的x轴 label/text？

我想要 hide/remove x 轴上的标签 即 "January"、"February" 等...

Answer 1

我添加了一个新选项。

http://www.knighttube.com/scripts/chart.js

http://www.knighttube.com/scripts/chart.min.js

showXAxisLabel:false

Answer 2

最简单的解决方案是：

scaleFontSize: 0

查看 chart.js Document

Answer 3

我通过将标签定义为空字符串列表来解决这个问题。示例：

var data = {
    labels: ["", "", "", "", ""],
    datasets: [{
        label: "TEST",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [10, 20, 15, 8, 22]
    }]
};

为此，您需要工具提示框中的标签不相关。我的定义如下：

tooltipTemplate: "Latency: <%=value%>"

Answer 4

您可以像这样扩展当前的条形图并删除 xLabel。

function registerCustomBarChart() {
    Chart.types.Bar.extend({
        name: "customBarChart",
        initialize: function (data) {
            Chart.types.Bar.prototype.initialize.apply(this, arguments);
            var xLabels = this.scale.xLabels
            xLabels.forEach(function (label, i) {
                    xLabels[i] = '';
            })
        }
    });
}

var myBarChart = new Chart(context).customBarChart(data);

Answer 5

他们添加了选项，2.1.4（可能更早）有它

var myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            xAxes: [{
                ticks: {
                    display: false
                }
            }]
        }
    }
}

Answer 6

Charts.js 提供响应图表 configuration options 其中有 onResize 方法。它传递了两个参数：图表实例和新大小。如果您将两者都登录到控制台，您将在那里看到完整的图表实例，其中包括控制图表实例的所有常规选项 scales。

我将其添加到 Bar 图表实例上的 options 对象，因此 X 轴在调整到 768 像素的宽度时消失，然后出现在调整回桌面屏幕尺寸时。 Bar 实例是 react-chartjs-2 库提供的 Chart.js React 包装器。

<Bar
  data={barData}
  options={{
    // default value
    responsive: true,
    onResize: function(newChart, newSize) {
      console.log('newChart:', newChart);
      console.log('newSize:', newSize);

      if (newSize.width < 768) {
        newChart.options.scales.xAxes[0].display = false;
      } else {
        newChart.options.scales.xAxes[0].display = true;
      }
    }, ...

对于 Pie 实例开关 newChart.options.scales.xAxes[0].display 对于 newChart.options.legend.display。

Answer 7

@Kapytanhook 的回答对于 chart.js 版本 2.x.x

是正确的

对于那些感兴趣的人，在修改他对...的回答后

chart.js v3.x.x

（因为 v3.x.x 不向后兼容 v2.x.x）

const myLineChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    scales: {
      x: {  // <-- object '{' now, instead of array '[{' before in v2.x.x
        ticks: {
          display: false
        }
      }
    }
  }
})

以编程方式：
此外，正如 show/hide lables/ticks 中提到的问题，我添加了一个按钮以编程方式修改图表：

myLineChart.options.scales['x'].ticks.display = true;
myLineChart.update();

按照包含示例数据的完整代码到运行片段并查看带有隐藏 x 轴刻度的结果。

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 btnShowHide = document.querySelector('#btnShowHide');

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

const myLineChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    scales: {
      x: { // <-- object '{' now, instead of array '[{' before in v2.x.x
        ticks: {
          display: false
        }
      }
    }
  }
});

btnShowHide.onclick = function() {
  if(btnShowHide.classList.contains('hidden')) {
    myLineChart.options.scales['x'].ticks.display = true;
    myLineChart.update();
    
    btnShowHide.classList.remove('hidden');
    btnShowHide.innerHTML = 'hide';
  } else {
    myLineChart.options.scales['x'].ticks.display = false;
    myLineChart.update();
    
    btnShowHide.classList.add('hidden')
    btnShowHide.innerHTML = 'show';
  }
}

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

<button id="btnShowHide" class="hidden">show</button>

<div style="width:320px">
  <canvas></canvas>
</div>

在 chart.js 中，如果从移动设备访问，是否可以隐藏条形图的 x 轴 label/text？

In chart.js, Is it possible to hide x-axis label/text of bar chart if accessing from mobile?

jquery

chart.js

chart.js v3.x.x