Chart.js - Увеличить расстояние между легендой и диаграммой

У меня есть гистограмма, на которой я нарисовал 3 вертикальные линии, каждая с собственной меткой наверху. Я бы хотел, чтобы эти метки были выше вершины оси y (выше строки 30% в примере), но ниже легенды. Я не могу понять, как увеличить пространство между верхней легендой и диаграммой, чтобы мои метки вертикальной линии (15, 24 и 33) были отделены от самой диаграммы, но ниже легенды. Любые идеи?

Ответ 1

К сожалению, поскольку для этого не существует опции конфигурации, единственный способ добиться желаемого результата - расширить Chart.Legend и реализовать обратный вызов afterFit().

Вот быстрый codepen, показывающий, как это сделать. Чтобы изменить интервал, просто измените значение в строке 9 (в настоящее время установлено значение 50). Кроме того, это, конечно, работает только с легендой наверху. Надеюсь, этот пример достаточно ясен, чтобы вы могли изменить его, если хотите переместить свою легенду в другом месте.

Ответ 2

Если вы хотите увеличить интервалы во всех диаграммах, вы можете поместить этот код перед созданием:

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

Конечно, я не пытаюсь, но я думаю, что вы можете изменить его (или скопировать исходный объект Chart раньше, чтобы сохранить исходное дополнение).

До свидания,

Ответ 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 + вдохновленный этим другим ответом

Ответ 4

Это помогло мне после 2 дней исследований.

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

обновить это в файле module.ts