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