我们如何添加像图片这样的标签？

Question

我创建了 SPFx React 项目。

我使用 PrimeReact 图表实现了条形图。

据我所知，PrimeReact 在后端使用 ChartJs 库。

我需要在下图中添加红色和蓝色的标签和值标记。

下面是我的代码片段，

import { Chart } from 'primereact';
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
ChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels);

    <Chart type="bar" data={barChartData} options={barChartOptions} />
    
    const barChartData = {
                        labels: ["Excellent", "Very Good", "Good", "Average"],
                        datasets: [
                          {
                            label: "Count",
                            data: [40, 50, 30, 10],
                            backgroundColor: ["#E74C3C", "#3498DB", "#F1C40F", "#27AE60"],
                            borderColor: ["#E74C3C", "#3498DB", "#F1C40F", "#27AE60"],
                            borderWidth: 1,
                            borderRadius: 10, // Rounded bar edges
                            barPercentage: 0.5,
                            barThickness: 6,
                            maxBarThickness: 8,
                          }
                        ],
                      };
    
                      const barChartOptions = {
                        indexAxis: "y", // Horizontal chart
                        scales: {
                          x: {
                            beginAtZero: true,
                            ticks: {
                              display: false,
                            },
                            grid: {
                              display: false,
                              drawBorder: false
                            }
                          },
                          y: {
                            beginAtZero: true,
                            grid: {
                              display: false,
                              drawBorder: false
                            }
                          }
                        },
                        plugins: {
                          datalabels: {
                            color: '#000',
                            anchor: 'end',
                            align: 'end',
                            font: {
                              weight: 'bold',
                            }
                          },
                          tooltip: {
                            callbacks: {
                              label: function (context) {
                                const dataset = context.dataset;
                                const total = dataset.data.reduce((a, b) => a + b, 0); // Sum of all data
                                const value = dataset.data[context.dataIndex]; // Current value
                                const percentage = ((value / total) * 100).toFixed(2); // Calculate percentage
                                // return `${context.label}: ${percentage}%`; // Display label and percentage
                                return [`${context.label}: ${value} (${percentage}%)`]; // Display label and percentage
                              }
                            }
                          },
                          legend: {
                            display: false, // Hide the legend
                          },
                        },
                        layout: {
                          padding: {
                            right: 20, // Add padding to the top
                          },
                        },
                        responsive: true,
                        maintainAspectRatio: false,
                        animation: { duration: 0 }
                      };

任何人都可以帮助我吗？

提前致谢。

Answer 1

左侧的标签可以通过

barChartData.labels

设置：

const labels = [...barChartData.labels];
barChartData.labels = barChartData.datasets[0].data.map(v => `${v}%`);

这意味着在几个地方更改原始代码以使用“全局” 变量

labels

作为原始标签的来源。

工具提示选项将需要一些更改：

tooltip: {
   callbacks: {
      title: function(context){
         return labels[context[0].dataIndex];
      },
      label: function (context) {
         const dataset = context.dataset;
         const total = dataset.data.reduce((a, b) => a + b, 0); // Sum of all data
         const value = dataset.data[context.dataIndex]; // Current value
         const percentage = ((value / total) * 100).toFixed(2); // Calculate percentage
         return [`${labels[context.dataIndex]}: ${value} (${percentage}%)`]; // Display label and percentage
      }
   }
}

对于条形顶部的标签，可以使用（或者我应该说 劫持）插件

chartjs-plugin-datalabels

通过查看原始代码，似乎已经可用。 这些标签的插件选项可能是：

datalabels: {
   color: '#777',
   anchor: 'start',
   align: 315,
   offset: -4,
   formatter: function(value, context) {
      return labels[context.dataIndex]
   },
   font: {
      weight: 'bold',
   }
},

a stackblitz中的完整代码，从PrimeReact游乐场分叉。

---

如果不想弄乱标签中的标签，还有一种替代解决方案 原始数据，是隐藏 y 轴并将左侧值显示为另一个数据标签， 所以数据标签选项是：

datalabels: {
   labels: {
      left:{
         anchor: 'start',
         align: 205,
         offset: -2,
         formatter: function(value){
            return `${value}%`
         },
         font: {
            size: 13
         }
      },
      top: {
         color: '#777',
         anchor: 'start',
         align: 315,
         offset: -4,
         formatter: function(value, context){
            return barChartData.labels[context.dataIndex]
         },
         font: {
            weight: 'bold',
         }
      }
   }
}

工具提示选项将是原始代码中的选项，并且左侧 必须添加填充。这是此版本的 stackblitz 分支。