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 V 1.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}];

react-chartjs中传递的值

2 个答案: