Angular8 如何在图形的点上显示数据标签？ng2chart

这是我在折线图中遵循的链接。我可以在饼图上显示数据，但在这个折线图上似乎有所不同。如下图所示，如何在图上显示数据

更新

我在下面添加了一长行代码。Typescript文件也可以在上面的链接中找到

html

ts

不使用chartjs插件注释，您可以使用直接在画布上绘制标签。它提供了许多钩子，可用于执行自定义代码。在您的情况下，您可以使用afterDraw钩子并在ngOnInit方法中注册它，如下所示：

ngOnInit(): void {
  Chart.pluginService.register({
    afterDraw: chart => {
      var ctx = chart.chart.ctx;
      var xAxis = chart.scales['x-axis-0'];
      var yAxis = chart.scales['y-axis-0']; // would be 'y-axis-1' in your code sample 
      ctx.save();
      chart.data.labels.forEach((l, i) => {
        var value = chart.data.datasets[0].data[i];
        var x = xAxis.getPixelForValue(l);
        var y = yAxis.getPixelForValue(value);
        ctx.textAlign = 'center';
        ctx.font = '12px Arial';
        ctx.fillStyle = 'red';
        ctx.fillText(value, x, y - 15);
      });
      ctx.restore();
    }
  });
}

---

请查看此代码以了解其工作原理。

请显示代码，以便我了解您如何使用它？@Wahabsah有任何评论吗？我只是查看代码，实际上有什么问题，比如您希望教程中有多行代码，或者您的纯色不透明？您看到图表上的数字了吗？我想在图表上显示，但我不知道如何显示，也不知道它的文档。这是专门针对折线图的，因为我能够在饼图上显示标签。也许我没有正确地理解你，或者什么，但是图形上已经有数字了，左边和曲线点上也有数字？我遗漏了什么吗？我得到了这个错误，但它似乎在StackBlitz上工作，而且StackBlitz上也显示了错误。为什么呢？类型“importc:/Users/portal/Client/node_modules/@types/chart.js/index.d.ts”上不存在属性“chart”。ts2339

import { Component, OnInit, ViewChild } from "@angular/core";
import { BaseChartDirective, Color, Label } from "ng2-charts";
import { ChartDataSets, ChartOptions } from "chart.js";
import * as pluginAnnotations from "chartjs-plugin-annotation";

@Component({
    selector: "kt-chart1",
    templateUrl: "./chart1.component.html",
    styleUrls: ["./chart1.component.scss"],
})
export class Chart1Component implements OnInit {




    public lineChartData: ChartDataSets[] = [
        {
            data: [180, 33, 200, 300, 333, 270, 200],
            label: "Cost",
            yAxisID: "y-axis-1",
        },
    ];
    public lineChartLabels: Label[] = [
        "01/05/2020",
        "02/05/2020",
        "03/05/2020",
        "04/05/2020",
        "05/05/2020",
        "06/05/2020",
        "07/05/2020",
  ];



    public lineChartOptions: ChartOptions & { annotation: any } = {
        plugins: {
            labels: {
                fontColor: ["green", "white", "red"],
                precision: 2,
                textShadow: true,
                render: function (args) {

                    return args.value + "(" + args.toFixed(1) + "%)";
                },
                position: "inside",
            },
            datalabels: {
                formatter: () => {
                    return null;
                },
            },
        },
        responsive: true,
        scales: {
            // We use this empty structure as a placeholder for dynamic theming.
            xAxes: [{}],
            yAxes: [
                {
                    id: "y-axis-1",
                    position: "right",
                    gridLines: {
                        color: "rgba(255,0,0,0.3)",
                    },
                    ticks: {
                        fontColor: "red",
                    },
                },
            ],
    },

        annotation: {
            annotations: [
                {
                    type: "line",
                    mode: "horizontal",
                    scaleID: "y-axis-1",
                    value: "200",
                    borderColor: "red",
                    borderWidth: 2,
                    label: {
                        enabled: true,
                        fontColor: "orange",
                        content: "200",
                    },
                },
            ],
        },
        tooltips: {
            callbacks: {
                label: (item, data) => {
                    console.log(item);
                    return "Cost: " + item.xLabel + " " + item.yLabel;
                },
            },
        },
    };
    public lineChartColors: Color[] = [
        {
            // grey
            backgroundColor: "rgba(148,159,177,0.2)",
            borderColor: "rgba(148,159,177,1)",
            pointBackgroundColor: "rgba(148,159,177,1)",
            pointBorderColor: "#fff",
            pointHoverBackgroundColor: "#fff",
            pointHoverBorderColor: "rgba(148,159,177,0.8)",
        },
        {
            // dark grey
            backgroundColor: "rgba(77,83,96,0.2)",
            borderColor: "rgba(77,83,96,1)",
            pointBackgroundColor: "rgba(77,83,96,1)",
            pointBorderColor: "#fff",
            pointHoverBackgroundColor: "#fff",
            pointHoverBorderColor: "rgba(77,83,96,1)",
        },
        {
            // red
            backgroundColor: "rgba(255,0,0,0.3)",
            borderColor: "red",
            pointBackgroundColor: "rgba(148,159,177,1)",
            pointBorderColor: "#fff",
            pointHoverBackgroundColor: "#fff",
            pointHoverBorderColor: "rgba(148,159,177,0.8)",
        },
    ];
    public lineChartLegend = true;
    public lineChartType = "line";
  public lineChartPlugins = [pluginAnnotations];

    @ViewChild(BaseChartDirective, { static: true }) chart: BaseChartDirective;

    constructor() {}

    ngOnInit() {

  }

    public randomize(): void {
        for (let i = 0; i < this.lineChartData.length; i++) {
            for (let j = 0; j < this.lineChartData[i].data.length; j++) {
                this.lineChartData[i].data[j] = this.generateNumber(i);
            }
        }
        this.chart.update();
    }

    private generateNumber(i: number) {
        return Math.floor(Math.random() * (i < 2 ? 100 : 1000) + 1);
    }

    // events
    public chartClicked({
        event,
        active,
    }: {
        event: MouseEvent;
        active: {}[];
    }): void {
        console.log(event, active);
    }

    public chartHovered({
        event,
        active,
    }: {
        event: MouseEvent;
        active: {}[];
    }): void {
        console.log(event, active);
    }

    public hideOne() {
        const isHidden = this.chart.isDatasetHidden(1);
        this.chart.hideDataset(1, !isHidden);
    }

    public pushOne() {
        this.lineChartData.forEach((x, i) => {
            const num = this.generateNumber(i);
            const data: number[] = x.data as number[];
            data.push(num);
        });
        this.lineChartLabels.push(`Label ${this.lineChartLabels.length}`);
    }

    public changeColor() {
        this.lineChartColors[2].borderColor = "green";
        this.lineChartColors[2].backgroundColor = `rgba(0, 255, 0, 0.3)`;
    }

    public changeLabel() {
        this.lineChartLabels[2] = ["1st Line", "2nd Line"];
        // this.chart.update();
    }
}

ngOnInit(): void {
  Chart.pluginService.register({
    afterDraw: chart => {
      var ctx = chart.chart.ctx;
      var xAxis = chart.scales['x-axis-0'];
      var yAxis = chart.scales['y-axis-0']; // would be 'y-axis-1' in your code sample 
      ctx.save();
      chart.data.labels.forEach((l, i) => {
        var value = chart.data.datasets[0].data[i];
        var x = xAxis.getPixelForValue(l);
        var y = yAxis.getPixelForValue(value);
        ctx.textAlign = 'center';
        ctx.font = '12px Arial';
        ctx.fillStyle = 'red';
        ctx.fillText(value, x, y - 15);
      });
      ctx.restore();
    }
  });
}