如何在图表的点上显示数据标签？ ng2图表

Question

https://valor-software.com/ng2-charts/#/LineChart

这就是我按照折线图做的link。我能够在饼图上显示数据，但在此折线图上似乎有所不同。如下图，如何在图表上显示数据？

更新

我在下面加了一大行代码。 Typescript 文件也可以在上面的 link 中找到。

html

<div class="flex">
    <div class="flex-item">
        <div style="display: block;">
            <canvas
                baseChart
                height="30vh"
                width="70vw"
                [datasets]="lineChartData"
                [labels]="lineChartLabels"
                [options]="lineChartOptions"
                [colors]="lineChartColors"
                [legend]="lineChartLegend"
                [chartType]="lineChartType"
                [plugins]="lineChartPlugins"
                (chartHover)="chartHovered($event)"
                (chartClick)="chartClicked($event)"
            ></canvas>
        </div>
    </div>

</div>

ts

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();
    }
}

Answer 1

您可以使用 Plugin Core API 直接在 canvas 上绘制标签，而不是使用 chartjs-plugin-annotation。它提供了许多可用于执行自定义代码的挂钩。在您的情况下，您可以使用 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();
    }
  });
}

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

如何在图表的点上显示数据标签？ ng2图表

how can I show the data label on the dot of the graph? ng2chart

angular8

ng2-charts