chartjs - 图表区域的顶部和底部填充

Question

我需要在图表区域上方和下方添加更多空间(靠近顶部和底部比例).似乎只能向垂直轴添加填充.我根据文档禁用了刻度线: http://www.chartjs.org/docs/#scales:

Chart.defaults.scale.gridLines.drawTicks = false;

chartjs图表区域顶部和底部填充图像:

我也可以添加填充到垂直轴刻度标签(刻度)

Chart.defaults.scale.ticks.padding = 15;

如何在顶部刻度上方和底部(零)刻度下方添加填充？

Answer 1

编辑：这不提供图表内的填充（这就是这个问题最初的内容），而是在图表周围添加填充

对于那些仍在寻找可能会出现在谷歌搜索中的人（像我一样），它似乎已在更高版本中解决：https : //www.chartjs.org/docs/latest/configuration/layout.html ＃填充

let chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    layout: {
        padding: {
            left: 50,
            right: 0,
            top: 0,
            bottom: 0
        }
    }
  }
});

Answer 2

有几种方法可以控制chart.js中的尺度/图例之间的填充(文档中记录的一些官方方式和其他地方描述的一些"hacky"方式).问题是,没有办法使用现有的配置选项来控制整个图表中的填充(左侧比例,底部比例,顶部比例......或图例底部等).

幸运的是,由于灵活的chart.js接口(并且因为我们可以创建新的缩放类型等),所以仍然可以毫不费力地控制填充.让我解释添加左,上和下填充的方法,然后在最后提供一个工作示例(如果您愿意,请跳过前面).

左边填充

这个很容易.有一个记录的选项来控制它.只需将scales.yAxes.ticks.padding选项设置为您想要的任何值.这是一个例子.

scales: {
  yAxes: [{
    ticks: {
      beginAtZero: true,
      padding: 25,
    }
  }]
}

顶部填充(或图例填充)

没有选项来控制它,所以我们必须构建它.我通过创建一个新的Legend对象并覆盖afterFit()使用paddingBottom选项对象上的选项集的函数来构建它.这不是太难,但需要四处走动才能做到这一点.这是相关的代码.

function getBoxWidth(labelOpts, fontSize) {
  return labelOpts.usePointStyle ?
    fontSize * Math.SQRT2 :
  labelOpts.boxWidth;
};

Chart.NewLegend = Chart.Legend.extend({
  afterFit: function() {
    this.height = this.height + this.options.paddingBottom;
  },
});

function createNewLegendAndAttach(chartInstance, legendOpts) {
  var legend = new Chart.NewLegend({
    ctx: chartInstance.chart.ctx,
    options: legendOpts,
    chart: chartInstance
  });

  if (chartInstance.legend) {
    Chart.layoutService.removeBox(chartInstance, chartInstance.legend);
    delete chartInstance.newLegend;
  }

  chartInstance.newLegend = legend;
  Chart.layoutService.addBox(chartInstance, legend);
}

// Register the legend plugin
Chart.plugins.register({
  beforeInit: function(chartInstance) {
    var legendOpts = chartInstance.options.legend;

    if (legendOpts) {
      createNewLegendAndAttach(chartInstance, legendOpts);
    }
  },
  beforeUpdate: function(chartInstance) {
    var legendOpts = chartInstance.options.legend;

    if (legendOpts) {
      legendOpts = Chart.helpers.configMerge(Chart.defaults.global.legend, legendOpts);

      if (chartInstance.newLegend) {
        chartInstance.newLegend.options = legendOpts;
      } else {
        createNewLegendAndAttach(chartInstance, legendOpts);
      }
    } else {
      Chart.layoutService.removeBox(chartInstance, chartInstance.newLegend);
      delete chartInstance.newLegend;
    }
  },
  afterEvent: function(chartInstance, e) {
    var legend = chartInstance.newLegend;
    if (legend) {
      legend.handleEvent(e);
    }
  }
});

底部填充

也没有选项来控制它,所以我们也必须构建它.由于我们在这里处理一个比例,最好的方法是扩展'类别'比例并添加逻辑来处理比例paddingTop选项.在阅读完源代码后,我们需要覆盖该draw()函数来执行此操作.这是相关代码(请参阅我的完整实现示例).

// ...
if (isHorizontal) {
  if (options.position === 'bottom') {
    // bottom
    textBaseline = !isRotated? 'top':'middle';
    textAlign = !isRotated? 'center': 'right';
    labelY = me.top + tl + me.options.paddingTop;
  } else {
    // top
    textBaseline = !isRotated? 'bottom':'middle';
    textAlign = !isRotated? 'center': 'left';
    labelY = me.bottom - tl;
  }
}
// ...

这是一个代码集示例,显示所有这些放在一起.