chart.js 條形圖 x 軸標簽消失

Question

調整大小后：

調整大小前：

這是我的代碼。 我想讓圖表始終保持相同的大小，但我不知道如何。

這是chart.js范圍設置，但我認為在這種情況下它們是不正確的。

鑒於軸范圍設置的數量，了解它們如何相互交互非常重要。

建議最大和建議最小設置僅更改用於縮放軸的數據值。 這些對於在保持自動擬合行為的同時擴展軸的范圍很有用。

      /*#######################################*/
      var warnColor = 'rgba(255, 0, 0, 1)';
      var careColor = 'rgba(255, 228, 0, 1)';
      var protectColor = 'rgba(54, 162, 235, 1)';

      Chart.pluginService.register({//PLUG IN
        beforeUpdate: function(chartInstance) {
          chartInstance.data.datasets.forEach(function(dataset) {
            dataset.backgroundColor = dataset.data.map(function(data) {
              if ( data >= 70) return warnColor;
              else if ( data >= 50 && data < 70 ) return careColor;
              else return protectColor;
            })
          })
        }
      });

      Chart.defaults.global.defaultFontSize = 15;

      var ctx = $('#myChart');
      var myChart = new Chart(ctx, {
        type: 'bar',
          data: {
            labels: ["CPU Usage", "Memory Usage", "Network Usage", "Disk Usage", "SysvIPC Count"],
            datasets: [{
              data: [10,20,30,40,50],
              borderColor: [
              'rgba(54, 162, 235, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(54, 162, 235, 1)'
              ],
              borderWidth: 1
            }]
          },
          options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    layout: {
                        padding: {
                          left: 0,
                          right: 0,
                          top: 40,
                          bottom: 0
                        }
                      },
                      onClick: barClickEvent,
                      legend: {
                        display: false
                      },
                      scales: {
                        yAxes: [{
                          ticks: {
                            min: 0,
                            max: 100,
                            beginAtZero:true
                          },
                        }]
                      },
                      tooltips: {
                          enabled: true
                      },
                      hover: {
                          animationDuration: 0
                      },
                      animation: {
                          duration: 1,
                          onComplete: function () {
                            var chartInstance = this.chart,
                                ctx = chartInstance.ctx;
                                ctx.font = Chart.helpers.fontString(17, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                                ctx.textAlign = 'center';
                                ctx.textBaseline = 'bottom';

                                this.data.datasets.forEach(function (dataset, i) {
                                    var meta = chartInstance.controller.getDatasetMeta(i);
                                    meta.data.forEach(function (bar, index) {
                                        var data = dataset.data[index];
                                        ctx.fillStyle = "#000000";
                                        if (index !== 4) {//qnum
                                          data += '%';
                                        }
                                        ctx.fillText(data, bar._model.x, bar._model.y - 5);
                                    });
                                });
                            }
                        }
                    }
        });
        function barClickEvent(event, array){

          var activePoints = myChart.getElementsAtEvent(event);

          switch (activePoints[0]._index) {
            case 0: window.location = '/usage_cpu';
              break;
            case 1: window.location = '/usage_mem';
              break;
            case 2: window.location = '/usage_tcp';
              break;
            case 3: window.location = '/usage_disk';
              break;
            case 4: window.location = '/stat_ipcq';
              break;
            default: window.location = '/';
          }
        }
    

Answer 1

老問題，但這可能是因為您必須禁用autoSkip ：

scales: {
    xAxes: [{
        stacked: false,
        beginAtZero: true,
        scaleLabel: {
            labelString: 'Month'
        },
        ticks: {
            autoSkip: false
        }
    }]
}

您可以在此處閱讀更多相關信息： http : //www.chartjs.org/docs/latest/axes/cartesian/#tick-configuration

Answer 2

我正在使用 xAxes: [{ ticks: { autoSkip: false } }, { gridLines: { display: false } }] 並且它失敗了，一旦我將 gridLines 刪除為 xAxes: [{ ticks: { autoSkip: false } } //{ gridLines: { display: false } }] 它開始工作了：這意味着還需要考慮屬性的組合。

Answer 3

唯一有效的方法是在updateScaleDefaults函數中。

Chart.scaleService.updateScaleDefaults('category', {
            gridLines: {
                drawBorder: false,
                drawOnChartArea: false,
                drawTicks: false
            },
            ticks: {
                // autoSkip: false,
                padding: 20
            },
            maxBarThickness: 10
        });

這是在看起來像全局配置函數的內部，如果我在那里添加它，它會全局更改，如果我將設置添加到單個圖表，它不起作用