Chart.js工具提示-悬停时不显示标签

vatpfxk5  于 2023-05-28  发布在  Chart.js
关注(0)|答案(1)|浏览(222)

我想将numberValue的值显示为条形图上悬停时的标签。我已经尝试了很多方法来做到这一点,但没有出现在悬停在酒吧。下面是代码:

getBarChart() {
    this.http.get(API).subscribe({
      next: (data) => {
        this.totalAmount= data;
        let splitted = this.totalAmount.toString().split(",");
        let numberValue= splitted[0];
        let totalAmountPerMonth = splitted[1];
        let month = splitted[2];

        this.barChart.data.labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

        let dataValues = new Array(12).fill(null);
        let monthIndex = parseInt(month) - 1;
        dataValues[monthIndex] = totalAmountPerMonth;

        this.barChart.data.datasets = [
          {
            label: "Total Amount",
            data: dataValues,
            backgroundColor: DARK_BLUE
          }
        ];
        this.barChart.update();
      },
      error: (err) => {
        console.log(err);
      }
    });

    Chart.register(BarController);
    Chart.register(CategoryScale);
    Chart.register(LinearScale);
    Chart.register(BarElement);

    this.barChart = new Chart("barChart", {
      type: 'bar',
      data: {
        labels: [],
        datasets: []
      },
      options: {
        aspectRatio: 2.5,
        scales: {
          x: {
            title: {
              display: true,
              text: "Month"
            }
          },
          y: {
            title: {
              display: true,
              text: "Total Amount"
            }
          }
        },
        plugins: {
          legend: {
            display: false
          },
          tooltip: {
            callbacks: {
              label: (context) => {
                const value = context.dataset.data[context.dataIndex];
                const numberValue = value !== null ? value : 'N/A';
                return `Number: ${numberValue}`;
              }
            }
          }
        },
      }
    });
  }
0sgqnhkj

0sgqnhkj1#

您需要导入并注册Tooltip以使其显示

相关问题