在chart.js中，如果從手機訪問，是否可以隱藏條形圖的x軸標簽/文本？

Question

在chart.js中，如果從手機訪問，是否可以隱藏條形圖的x軸標簽/文本？

我想隱藏/刪除x 軸上的標簽，即“一月”、“二月”等......

Answer 1

他們添加了選項，2.1.4（也許更早）有它

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

Answer 2

我添加了一個新選項。

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

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

showXAxisLabel:false

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

最簡單的解決方案是：

scaleFontSize: 0

參見chart.js 文檔

Answer 5

您可以像這樣擴展當前的 BarChart 並刪除 xLabels。

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 6

Charts.js 提供了響應式圖表配置選項，其中有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.xx是正確的

對於那些有興趣的人，在修改了他對...的回答之后

chart.js v3.xx

（因為v3.xx不向后兼容v2.xx ）

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
        }
      }
    }
  }
})

按照帶有示例數據的完整代碼運行代碼段並查看隱藏 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 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.xx ticks: { display: false } } } } })

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