如何使用 ng2-chart 创建数据标签？

Question

好吧，我再次遇到了 Angular 和 javascript 问题，对于我提出的每个问题都感觉自己很愚蠢。

但让我尝试解释一下我最初的步骤以及它如何导致这个问题。因此，在我最新的项目中，我想添加一些精美的图表，让事情变得更清晰、更易于用户使用。我想到了 Chart.js...或者我应该说，ng2-charts。

事情很顺利，东西看起来不错，但是......我有两个问题。在水平条上，我想动态改变图表的大小，这样用户就不必滚动一段模糊的时间来向下滚动页面。所以，而不是这个笨重的野兽......

我尝试应用一些 Angular 魔法。后来我想在后端计算它的大小。目前，静态值就可以了。

@ViewChild('inventoryChart') itemChart : ElementRef;

constructor(public renderer: Renderer2) { }

ngAfterViewInit() {
   this.renderer.setStyle(this.itemChart.nativeElement, 'height', '230px')
}

这导致...

好的。但我的第二个问题比我想象的要困难得多。我希望图表在每个条形图上都有各自的值。我有点震惊地发现，它不是 Chart.js 的固有功能，而是一个插件。因此，我尝试通过查看图表配置来缩小问题范围。

@ViewChild('itemChart') itemChart : ElementRef;

  //public context: CanvasRenderingContext2D;

  public chartType: string = 'horizontalBar';

  chartDatalabel: ChartLabel;

  public chartDatasets: Array<any> = [
    { data: [28, 20, 6, 5, 3], label: 'Inventory per country' }
  ];

  public chartLabels: Array<any> = ['DEU', 'SVK', 'FRA', 'GBR', 'AUT'];

  public chartColors: Array<any> = [
    {
      backgroundColor: '#0E599A',
      pointBackgroundColor: 'rgba(220,220,220,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(220,220,220,1)'
    },
  ];

  public chartOptions: any = {
    responsive: true,
    maintainAspectRatio: false,

    scales: {
      yAxes: [{
        barPercentage: .9,
        categoryPercentage: .9,

        gridLines: {
          offsetGridLines: true,
          display: true,
        },
        ticks: {
          beginAtZero: true
        } 
      }], 
      xAxes: [{
        ticks: {
          beginAtZero: true, 
          min: 0
        },
        gridLines: {
          offsetGridLines: true,
          display: true,
        },
      }]
    },
  };

由于我有类似的问题并通过查看文档...它需要图表来注册插件。

所以我添加了

import { Chart } from 'chart.js';

但很快我意识到，我不知道如何实际获取我在组件中创建的图表实例。我怎样才能将其添加到仅适用于该特定图表的选项中？我没有找到很多与我有类似问题的来源（这让我感觉更无能......）。

是否有任何干净的“角度方式”可以在 ng2-charts 中添加此插件？

编辑：从文档来看，我可以通过以下方式定义插件可以做什么......

var plugin = { /* plugin implementation */ };

然后在图表的选项或全局中调用这个插件......

Chart.plugins.register({
    // plugin implementation
});

我想避免这种情况。除非绝对必要且节省时间，否则永远不要热衷于全局配置。

EDIT2：有点放弃了不在全球范围内注册它，但它仍然没有多大帮助。我添加到我的进口...

import { Chart } from 'chart.js';
import * as ChartLabel from 'chartjs-plugin-datalabels';

然后尝试在全局Chart中注册插件。

  ngOnInit() {
    Chart.plugins.register(ChartLabel);
  }

据我所知，这已经做了“一些事情”。所以我尝试对该插件进行一个非常基本的实现。其他工具提示不再起作用，但只有当我将鼠标悬停在栏上时才会触发错误。

plugins: {
  datalabels: {
    color: 'white',
    display: true,
    font: {
      weight: 'bold'
    },
    formatter: Math.round
  }
},

不知道我还能做什么...

Answer 1

好吧，由于实际上没有答案，我最终只能选择“全球”图表解决方案。

Chart.pluginService.register({
  // I gave it an id, so I could disable the plugin if needed
  id: 'p1', 
  afterDatasetsDraw: function (chart, _ease) {

    let width = chart.chart.width;
    let ctx = chart.chart.ctx;

    let datasets = chart.data.datasets;

    datasets.forEach(function (_dataset, index) {
      let meta = chart.getDatasetMeta(index);

      // grabbing the array with the data...
      let barLabelData = meta.controller._data;
      // console.log(meta.controller._data)

      if (!meta.hidden) {
        meta.data.forEach(function (segment, _index) {
          let model = segment._model;
          let position = segment.tooltipPosition();


          let x = position.x;
          let y = position.y;

          let height = model.height;

          ctx.restore();

          ctx.textBaseline = "middle";
          // var fontSize = (height / 114).toFixed(2);
          ctx.font = 'bold ' + height / 2 + 'px Arial';
          ctx.fillStyle = '#777'; //first label's font color


          let text = barLabelData[_index];

          ctx.fillText(text, x, y);
          ctx.save();


        })

      }

    });

  }
});

最终我得到了一张看上去还不错的图表。所以是的，它并不像我想要的那样干净。但实施过程中仍存在问题。

我的图表组件全局实现我的插件逻辑。这是糟糕的设计，我必须将其解耦。小问题是，我必须确保标签始终有效并且正确描述。但现在我很高兴它有效。