在react-chartjs中传递什么值

Question

使用来自link的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 V1.1.1。文档可以在这里找到Chart.js documentation V 1.1.1。

Answer 2

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

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