ReactJS-用chartJS-2标注多维数组

Question

下面我要创建的图表：

我正在尝试向图表添加标签，但是显示为未定义。当我输入

  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;

Answer 1

根据react-chartjs-2示例，有一个单独的名为labels的键。请参阅下面我做的工作示例（您可以看到其原始示例here）：

var Doughnut = reactChartjs2.Doughnut;

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

const data = {
  labels: [
    'Dummy 1',
    'Dummy 2',
    'Dummy 3'
  ],
  datasets: [{
      data: [487, 189],
      backgroundColor: ["rgba(0, 193, 189)"],
      borderColor: ["rgba(0, 193, 189)"],
      borderWidth: 1
    },
    {
      data: [236, 764],
      backgroundColor: ["rgba(0, 135, 136)"],
      borderColor: ["rgba(0, 135, 136)"],
      borderWidth: 1
    },
    {
      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
};
ReactDOM.render( <
  DummyChart / > ,
  document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src='https://unpkg.com/[email protected]/dist/Chart.js'></script>
<script src='https://unpkg.com/[email protected]/dist/react-chartjs-2.js'>
</script>
<div id='app'></div>