时间戳

首页 > 解决方案 > 使用 angular-chart.js 时如何增加图例和图表之间的空间？

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

问题描述

我正在使用 angular-chart.js 创建一个图表，并增加了相当多的点大小（默认为 5 为 8），以提高我们用户的可见性。这样做会使折线图的点与图例重叠。

标签： javascriptangularjschart.js

解决方案

这是此答案中修复的实现：https ://stackoverflow.com/a/55411810 ，来自这篇文章：Chart.js - 增加图例和图表之间的间距...

在您设置的任何控制器中，添加一个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>

我会将其添加为对引用答案的评论，但我的帐户代表。作为一个新帐户太低了。

我真的希望这些信息可以帮助那里的人！感谢那些让我走上正确道路的人！！！

推荐阅读