Question

我有一个条形图，我在其中绘制了3条垂直线，每条线在顶部都有自己的标签。我希望这些标签位于y轴的顶部之上（在示例中位于30％线之上）但在图例下方。我无法弄清楚如何增加顶部图例和图表之间的空间，以便我可以将我的垂直线标签（15,24和33）放在图表本身之外但在图例下方。有什么想法吗？

Answer 1

如果要增加所有图表中的间距，可以在创建之前放置以下代码：

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

当然，我不会尝试，但是我认为您可以更改它（或保留原来的Chart对象，以保留原来的填充）。

再见

Answer 2

不幸的是，由于没有配置选项来处理这个问题，唯一可以实现所需结果的方法是扩展Chart.Legend并实现afterFit()回调。

这是一个快速codepen，展示如何做到这一点。要更改间距，只需更改第9行中的值（当前设置为50）。此外，这当然只适用于顶部的图例。希望这个例子很清楚，你可以修改，以防你想在其他地方移动你的传奇。

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启发的this other answer

Answer 4

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

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

Answer 5

如果有人想知道为什么 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 6

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

this.data.getTimeZone().subscribe((data: any)=> {
        this.timezones = data;
      })

在module.ts文件中更新此

Answer 7

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

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

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

希望有帮助。

Answer 8

我已经在我的react（react-chartjs-2）项目上尝试了上述方法，但是没有运气。在这里，我有一种不同的方法，例如在图表外部创建自定义图例。这样您就可以对其进行更多控制

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

我知道OP并不是关于reactjs组件的，但由于它是一个常见问题，它将对某人有所帮助。

Orginal reference

。

Chart.js - 增加图例和图表

8 个答案: