chart.js 条形图 x 轴标签消失

Question

chart.js 条形图 x 轴标签消失

javascriptnode.jschart.js

4

调整大小后：

before resize

调整大小前：

after resize

这是我的代码。我想让图表始终保持相同的大小，但我不知道该如何实现。

这是 chart.js 范围设置，但我认为在这种情况下它们是不正确的。

考虑到坐标轴范围设置的数量，了解它们之间的交互方式非常重要。

suggestedMax 和 suggestedMin 设置只改变用于缩放坐标轴的数据值。这些对于扩展轴的范围而保持自适应行为非常有用。

      /*#######################################*/
      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 = '/';
          }
        }

- 박철형

3个回答

0

唯一的方法是在一个名为updateScaleDefaults的函数内部运行。

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

这段代码似乎在全局配置函数中，如果我在那里添加它，它会全局改变，但如果我将设置添加到单个图表中，则不起作用。

- Marcos Di Paolo

0

我曾经使用过 xAxes: [{ ticks: { autoSkip: false } }, { gridLines: { display: false } }] 但是它出现了故障，当我将gridLines移除后， xAxes: [{ ticks: { autoSkip: false } } //{ gridLines: { display: false } }] 它就开始正常工作了：这意味着需要考虑属性的组合。

- Saurabh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Araw · Accepted Answer

虽然这个问题早有答案，但可能是因为你需要禁用 autoSkip：

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

你可以在这里阅读更多关于它的内容: http://www.chartjs.org/docs/latest/axes/cartesian/#tick-configuration。此链接涉及IT技术与图表制作相关的主题。