将标签数组放入 chartjs？

Question

我有这些代码：让 arr = [];

  items &&
    items.map((index) => {
      arr.push(index.itemName);
    });

这是 console.log(arr); 显示的内容：

["Item1", "Item2", "Item3", "Item4"]

下面是我的图表：如何遍历要放入标签内的对象 arr？

   <Pie
        data={{
          labels: , <-- How can I loop through all of the `arr` here?
          datasets: [
            {
              label: "1st Dose",
              data: [10, 20, 30, 50, 30],
              backgroundColor: ["red", "orange", "yellow", "Green", "Blue"],
              borderColor: ["rgba(255, 99, 132, 1)"],
              borderWidth: 1,
            },
          ],
        }}
        height={400}
        width={600}
        options={{
          maintainAspectRatio: false,
          title: {
            display: true,
            text: "Hello",
            fontSize: 20,
          },
          legend: {
            labels: {
              fontSize: 25,
            },
          },
        }}
      />

Answer 1

图表标签接收字符串或字符串数组：

interface ChartData {
  labels?: Array<string | string[]>;
  datasets?: ChartDataSets[];
}

因此，您将像这样将数组直接放入标签中：

data={{
  labels: arr,
  datasets: [
    {
      label: "1st Dose",
      data: [10, 20, 30, 50, 30],
      backgroundColor: ["red", "orange", "yellow", "Green", "Blue"],
      borderColor: ["rgba(255, 99, 132, 1)"],
      borderWidth: 1,
    },
  ],
}}

供您学习的实例：

将标签数组放入 chartjs？

Putting label array to the chartjs?

javascript

charts

reactjs

chart.js