ReactJS-使用chartJS-2标记多维数组

我正在尝试创建以下图表：

我正在尝试将标签添加到图表中，但它显示为未定义。我进去的时候

  labels: ["1", "2", "3"],

它将变量“1”赋予所有第一个变量。这方面的任何帮助都将是非常棒的。多谢各位

const DummyChart = () => (
  <Doughnut data={data} options={options} width={360} height={360} />
);

 const data = {
  datasets: [
    {
      label: "Dummy 1",
      data: [487, 189],
      backgroundColor: ["rgba(0, 193, 189)"],
      borderColor: ["rgba(0, 193, 189)"],
      borderWidth: 1
    },
    {
      label: "Dummy 2",
      data: [236, 764],
      backgroundColor: ["rgba(0, 135, 136)"],
      borderColor: ["rgba(0, 135, 136)"],
      borderWidth: 1
    },
    {
      label: "Dummy 3",
      data: [811, 189],
      backgroundColor: ["rgba(0, 193, 189)"],
      borderColor: ["rgba(0, 193, 189)"],
      borderWidth: 1
    }
  ]
};


const options = {
  responsive: true,
  legend: {
    display: false
  },
  rotation: Math.PI,
  circumference: Math.PI,
  cutout: 50
};

export default DummyChart;

常量DummyChart=（）=>(
);
常数数据={
数据集：[
{
标签：“虚拟1”，
数据：[487189]，
背景颜色：[“rgba（0193189）”，
边框颜色：[“rgba（0193189）”，
边框宽度：1
},
{
标签：“虚拟2”，
数据：[236764]，
背景颜色：[“rgba（0135136）”，
边框颜色：[“rgba（0135136）”，
边框宽度：1
},
{
标签：“虚拟3”，
数据：[811189]，
背景颜色：[“rgba（0193189）”，
边框颜色：[“rgba（0193189）”，
边框宽度：1
}
]
};
常量选项={
回答：是的，
图例：{
显示：假
},
旋转：Math.PI，
周长：Math.PI，
截止：50
};
导出默认DummyChart；

根据

react-chartjs-2

示例，有一个单独的键名为

labels

。您还必须使用

工具提示

选项，以便能够自定义标签。请参见下面我制作的工作示例：

var Doughnut=reactChartjs2.Doughnut；
常数DummyChart=（）=>（）；
常数数据={
标签：[
“虚拟1”，
“虚拟2”，
“虚拟3”，
],
数据集：[{
数据：[4871000]，
背景颜色：[“rgba（0193189）”，
边框颜色：[“rgba（0193189）”，
边框宽度：1
},
{
数据：[2361000]，
背景颜色：[“rgba（0135136）”，
边框颜色：[“rgba（0135136）”，
边框宽度：1
},
{
数据：[8111000]，
背景颜色：[“rgba（0193189）”，
边框颜色：[“rgba（0193189）”，
边框宽度：1
}
]
};
常量选项={
回答：是的，
图例：{
显示：假
},
旋转：Math.PI，
周长：Math.PI，
截止日期：50，
工具提示：{
回调：{
标签：功能（项目、数据）{
返回数据.labels[item.datasetIndex]+''+data.datasets[item.datasetIndex].data[0]+'/'+data.datasets[item.datasetIndex].data[1]
}
}
}
};
ReactDOM.render（
,
document.getElementById（'app'）
);
您是否尝试在图表上使用点标签。附加的chart js包含一个标签插件，允许更多的定制

您可以使用这个-npm i chartjs插件标签安装它

这里有一些演示的链接-
显示您的代码。更新，显示我的所有代码谢谢您的帮助，但它使所有行显示为虚拟1。@Hughesey，这是另一个问题。给你修好了。请参阅更新的代码片段。我非常感谢您的帮助。我需要每个拱门都有自己的标签。比如拱门1是伪1，是487/1000，伪2是236/1000等等。@Hughesey，我已经完全修改了代码段。我已经使用
工具提示
选项创建了一个自定义标签。现在，它应该准确地显示您需要的内容。