问题

我想在鼠标悬停在柱状图上时显示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}`;
              }
            }
          }
        },
      }
    });
  }

希望这可以帮助你在柱状图上显示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}`;
}
}
}
},
}
});
}

答案1

得分: 1

你需要导入并注册 Tooltip 才能使其显示。