在数据集中显示多个标签并将 % 添加到数据中

Question

我有我的数据集，我需要显示 3 个标签，但是当我添加更多标签时它只显示一个，我也希望能够有不同颜色的标签，我的另一个问题是我想添加“ %”添加到数据中，但它说“需要表达”。

这是我的数据集：

datasets: [{
      labels: ["Book 1", "Book 2" , "Book 3" ],
      data: [8%, 24%, 92%, 30% , 5%],
      backgroundColor: ["yellow", "red", "blue", "blue" , "red" ],
      barThickness:30
    }]

Answer 1

labels 属性是 data 的一部分，但不是 dataset 的元素，您应该这样写：data={labels, dataset}。您的数据长度和颜色数量也应与标签数量相匹配。我又添加了 2 本书（book4 和 book5）标签，这样我们就有了相同数量的标签、数据和颜色。

要添加'%' 符号，您可以使用options 对象根据需要修改标签。使用此对象，您可以提供回调函数来自定义标签。命名空间是 options.plugins.tooltip.callbacks。更多内容：Tooltip | Chart.js

你说的只显示1的label不完全是label，而是图表的legend。由于每本书的名称都在每个栏的正下方，因此我删除了带有 options 对象的图例。命名空间是 options.plugins.legend

以下是 Bar 对象及其外观图像

<Bar 
  width={100} 
  height={50} 
  data = {{
    labels: ["Book1","Book2","Book3","Book4","Book5"],
    datasets: [{
      data: [8, 24, 92, 30, 5],
      backgroundColor: ["yellow", "red", "blue", "orange", "pink"],
      
    }
  ]
  }}
  options={{
    plugins: {
      legend: {
        display: false
      },
      tooltip: {
        enabled: true,
        callbacks: {
          label: (context) => {
            let label = context.dataset.label || '';

              if (label) {
                  label += ': ';
              }
              if (context.parsed.y !== null) {
                  label += context.parsed.y + '%';
              }
              return label;
          }
        }
      }
    },
    
  }}
/>

如果您想要显示每个条形并在每个条形图的顶部有一个带有书名的图例，那么您需要做的是将每个条形图视为不同的数据集。对于每个数据集，在 label 属性中添加 book name，对于 labels 数组，只保留 1 个值，这样它就保持为一个部分，您可以随意写入或留空作为 ""。在这种情况下，legend 是必需的，因此 options 对象中的唯一区别是 legend 属性被省略并设置为其默认值：true

<Bar 
  width={100} 
  height={50} 
  data = {{
    labels: [""],
    datasets: [{
      label:'Book1',
      data: [8],
      backgroundColor: ["yellow"],
      
    },
    {
      label:'Book2',
      data: [24],
      backgroundColor: ["red"],
      
    },
    {
      label:'Book3',
      data: [92],
      backgroundColor: ["blue"],
      
    },
    {
      label:'Book4',
      data: [30],
      backgroundColor: ["orange"],
      
    },
    {
      label:'Book5',
      data: [5],
      backgroundColor: ["pink"],
      
    }
  ]
  }}
  options={{
    plugins: {
      tooltip: {
        enabled: true,
        callbacks: {
          label: (context) => {
            let label = context.dataset.label || '';

              if (label) {
                  label += ': ';
              }
              if (context.parsed.y !== null) {
                  label += context.parsed.y + '%';
              }
              return label;
          }
        }
      }
    },
    
  }}
/>

在数据集中显示多个标签并将 % 添加到数据中

showing more than one label in the dataset and add % to the data

charts

label

dataset

reactjs