У меня есть гистограмма, на которой я нарисовал 3 вертикальные линии, каждая с собственной меткой наверху. Я бы хотел, чтобы эти метки были выше вершины оси y (выше строки 30% в примере), но ниже легенды. Я не могу понять, как увеличить пространство между верхней легендой и диаграммой, чтобы мои метки вертикальной линии (15, 24 и 33) были отделены от самой диаграммы, но ниже легенды. Любые идеи?
К сожалению, поскольку для этого не существует опции конфигурации, единственный способ добиться желаемого результата - расширить Chart.Legend и реализовать обратный вызов afterFit().
Вот быстрый codepen, показывающий, как это сделать. Чтобы изменить интервал, просто измените значение в строке 9 (в настоящее время установлено значение 50). Кроме того, это, конечно, работает только с легендой наверху. Надеюсь, этот пример достаточно ясен, чтобы вы могли изменить его, если хотите переместить свою легенду в другом месте.
Если вы хотите увеличить интервалы во всех диаграммах, вы можете поместить этот код перед созданием:
Chart.Legend.prototype.afterFit = function() {
this.height = this.height + 50;
};
Конечно, я не пытаюсь, но я думаю, что вы можете изменить его (или скопировать исходный объект Chart раньше, чтобы сохранить исходное дополнение).
До свидания,
Если вы хотите применить отступ под легендой для некоторых диаграмм только в вашем приложении:
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 + вдохновленный этим другим ответом
Это помогло мне после 2 дней исследований.
Chart.Legend.prototype.afterFit = function() {
this.height = this.height + 50;
};
обновить это в файле module.ts