[使用angular-chart.js时如何增加图例和图表之间的空间？

Question

我正在使用angular-chart.js来创建图表，并且已经大大增加了点的大小（默认值是5，为8），以提高用户的可见度。这样做会使折线图的点与图例重叠。

Answer 1

这是此答案的解决方案的实现：https://stackoverflow.com/a/55411810，来自此帖子：Chart.js - Increase spacing between legend and chart ...

在您设置的任何控制器中，添加angular.module('graph').config()（“ .config”）块，以便您可以访问ChartProvider并通过它访问Chart对象：

angular.module('graph')
.config(function ($windowProvider, ChartJsProvider) {
  // Storing ChartJs on $window via $windowProvider.$get() in case
  // we need to do other stuff from directly within a Controller.
  let
    ChartJs =
      $windowProvider.$get().ChartJs =
        ChartJsProvider.$get().Chart;

  // Ref.: https://stackoverflow.com/a/55411810/7577883
  ChartJs.Legend.prototype.afterFit = function () {
    // You can change the height to whatever pixel value you need.
    this.height = this.height + 32;
  };
})
.controller('graphController', graphController);

function graphController($window) {
  // Example of your controller needs to do and/or options it needs to set.
  $scope.graphingData =       [ /* Your Data           */ ];
  $scope.graphingSeries =     [ /* The Series          */ ];
  $scope.graphingOptions =    [ /* ChartJs Options     */ ];
  $scope.graphingColours =    [ /* Chart Colour Scheme */ ];
}

在模板中：

<canvas 
  id="line" 
  class="chart chart-line" 
  chart-data="graphingData"
  chart-series="graphingSeries" 
  chart-options="graphingOptions"
  chart-colors="graphingColours"
></canvas>

我本该将其添加为引用答案的注释，但我帐户的代表。作为新帐户太低了。

我真的希望此信息可以帮助某个人！感谢那些帮助我走上正确道路的人们！！