在react-chartjs中传递什么值

Question

正在使用react-chartjs链接。在演示中给出了很好的例子，但是需要传递的data和options在任何地方都没有提到。使用flotjs饼图和发送相同的数据和选项如下，但它似乎不工作?是否有任何css/less需要添加，使图形应该是好的，或者有任何问题与输入的数据?

var chartData=[   {label: "Series 0",data: 1},
                  {label: "Series 1",data: 3},
                  {label: "Series 2",data: 9},
                  {label: "Series 3",data: 20}
              ];
var chartOptions={ series: { pie: { show: true } }, 
                   grid  : { hoverable: true }, 
                  tooltip: true,
              tooltipOpts: { content: "%p.0%, %s", shifts: {x: 20,y: 0},                   
                             defaultTheme: false }};
<PieChart data={chartData} options={chartOptions} width="600" height="250"/>

同样，在现有组件中导入chart.js和React。谁能告诉我chartData和chartOptions是否正确?

Answer 1

假设你使用的是react-chartjs的主分支，它们的文档链接到Chart.js V2。

然而，库使用Chart.js V 1.1.1。文档可以在这里找到Chart.js documentation V 1.1.1.

Answer 2

经过一些幕后调试后，我发现我们应该使用for chartData不是数据属性，而是value:

var chartData=[{label: "Series 0",value: 1},
               {label: "Series 1",value: 3},
               {label: "Series 2",value: 9},
               {label: "Series 3",value: 20}];