Chart.js

Question

我有一个条形图，我在其中绘制了 3 条垂直线，每条垂直线的顶部都有自己的标签。我希望这些标签位于 y 轴顶部上方（示例中高于 30% 线）但位于图例下方。我不知道如何增加顶部图例和图表之间的 space，这样我就可以让我的垂直线标签（15、24 和 33）脱离图表本身但在图例下方。有什么想法吗？

Answer 1

不幸的是，由于没有配置选项来处理此问题，您获得所需结果的唯一方法是扩展 Chart.Legend 并实施 afterFit() 回调。

这里是一个快速 codepen 展示如何做到这一点。要更改间距，只需更改第 9 行中的值（当前设置为 50）。此外，这当然只适用于顶部的图例。希望该示例足够清楚，以便您在想将图例移到其他地方时进行修改。

Answer 2

如果你想在所有图表中增加间距，你可以在创建之前添加此代码：

Chart.Legend.prototype.afterFit = function() {
    this.height = this.height + 50;
};

当然，我没有尝试，但我认为你可以更改它（或复制之前的原始 Chart 对象，以保留原始填充）。

再见，

Answer 3

如果您想在图例下方应用填充 仅对应用中的某些图表：

ChartJS >= 2.1.0

Chart.plugins.register({
  id: 'paddingBelowLegends',
  beforeInit: function(chart, options) {
    chart.legend.afterFit = function() {
      this.height = this.height + 50;
    };
  }
});

// ----------------------------------
// disable the plugin only for charts
// where you DO NOT WANT the padding
// ----------------------------------

// for raw ChartJS use:
var chart = new Chart(ctx, {
  config: {
    plugins: {
      paddingBelowLegends: false
    }
  }
});

// for angular-chartjs:
$scope.myChart.options.plugins = { paddingBelowLegends: false }
// then in template:
// <canvas class="chart ..." chart-options="myChart.options" ... />

ChartJS >= 2.5.0

支持每个图表的特定插件，应该可以做到：

var chart = new Chart(ctx, {
  plugins: [{
    beforeInit: function(chart, options) {
      chart.legend.afterFit = function() {
        this.height = this.height + 50;
      };
    }
  }]
});

见ChartJS documentation + inspired by this other answer

Answer 4

经过 2 天的研究，这对我有所帮助。

Chart.Legend.prototype.afterFit = function() {
    this.height = this.height + 50;
};

在 module.ts 文件中更新此内容

Answer 5

我正在使用 react-chartjs-2（但这只是一个端口并使用相同的配置对象）并且我能够通过更改嵌套在图例配置上的标签配置来实现：

chartOptions = {
  legend: {
    labels: {
      padding: 50 -> this one.
    }
  },

您可以在此处查看属性描述： https://www.chartjs.org/docs/latest/configuration/legend.html

希望对您有所帮助。

Answer 6

我已经在我的 react(react-chartjs-2) 项目中尝试了上述方法，但没有成功。在这里，我有一种不同的方法，比如在图表外创建自定义图例。这样您就可以更好地控制它

隐藏默认图例
使用任何引用方法获取图例对象。
循环并使用 html 和 css 创建自定义图例。
样本codesanbox

我知道 OP 与 reactjs 组件无关，但由于这是一个常见问题，它会对某人有所帮助。

Orginal reference

.

Answer 7

您可以在选项下使用布局属性。这对我有帮助：

   layout: {
        padding: {
            left: 50,
            right: 130,
            top: 0,
            bottom: 0
        }
    }

Answer 8

如果有人想知道为什么 afterFit 解决方案在 Chart.js 3.3.0 中不起作用，那是因为 afterFit 功能已从图例插件中删除。

如果你想通过利用 fit 函数来完成这项工作，你可以尝试这个 hacky 解决方案/解决方法：

const plugin = {
  beforeInit(chart) {
    // Get reference to the original fit function
    const originalFit = chart.legend.fit;

    // Override the fit function
    chart.legend.fit = function fit() {
      // Call original function and bind scope in order to use `this` correctly inside it
      originalFit.bind(chart.legend)();
      // Change the height as suggested in another answers
      this.height += 15;
    }
  };
}

我知道这不是一个理想的解决方案，但在我们对这个图例填充提供本机支持之前，恐怕这是我们现在能做的最好的事情了。

Answer 9

搜索 chart.js 文件后，我发现标签栏的高度在

中定义

height = this._fitRows(titleHeight, fontSize, boxWidth, itemHeight)

或

this.height = Math.min(height, options.maxHeight || this.maxHeight)

在 fit() 函数中

fit() {
const {options, ctx} = this;
if (!options.display) {
  this.width = this.height = 0;
  return;
}
const labelOpts = options.labels;
const labelFont = toFont(labelOpts.font);
const fontSize = labelFont.size;
const titleHeight = this._computeTitleHeight();
const {boxWidth, itemHeight} = getBoxSize(labelOpts, fontSize);
let width, height;
ctx.font = labelFont.string;
if (this.isHorizontal()) {
  width = this.maxWidth;
  height = this._fitRows(titleHeight, fontSize, boxWidth, itemHeight);
} else {
  height = this.maxHeight;
  width = this._fitCols(titleHeight, fontSize, boxWidth, itemHeight);
}
this.width = Math.min(width, options.maxWidth || this.maxWidth);
this.height = Math.min(height, options.maxHeight || this.maxHeight) + 40;}

然后我把它改成了+40，如上图。它对我来说很好，所以我想分享。

Chart.js - 增加图例和图表之间的间距

Chart.js - Increase spacing between legend and chart

chart.js2