javascript - “未定义”将出现在我的条形图中 react-chartjs
问题描述
我使用 react-chartjs-2 创建条形图。我的数据如下:
const chartData = {
labels: ['Dealer1', 'Dealer2', 'Dealer3', 'Dealer4', 'Dealer5', 'Dealer6'],
datasets: [
{
label: 'Ongoing',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'rgb(255, 99, 132)',
},
{
label: 'Stopped',
data: [2, 3, 20, 5, 1, 4],
backgroundColor: 'rgb(54, 162, 235)',
},
{
label: 'Done',
data: [3, 10, 13, 15, 22, 30],
backgroundColor: 'rgb(75, 192, 192)',
},
],
};
我将把它作为一个属性传递给我的组件,我将返回一个条形图,如下所示
<div className={`${styles.printReport}`}>
<React.Fragment>
<Layout.Row style={{ justifyContent: "center" }}>
<Headline headlineType="h2">{this.props.title}</Headline>
</Layout.Row>
<Layout.Row style={{ justifyContent: "center" }}>
<div style={{ display: 'block', height: 500, width: '95%' }}>
<Bar
data={
this.props.data
}
options={options}
height={500}
width={1000}
/>
我不知道为什么它在图表中间出现“未定义”。你有什么主意吗?
解决方案
我解决了如下问题。在 Bar 组件中,我做了以下更改
<Bar
data={{labels: [...this.props.labels],
text: this.props.message,
datasets: this.props.data
}}
我没有将 chartData 传递给 Bar 组件,而是将 chartData.labels 和 chartData.datasets 作为属性传递。
推荐阅读
- python - 如何在 Django Rest API 中从父模型中过滤子对象?
- sql-server - 通过 Sql 服务器发送短信或在 Excel 中复制文本并从手机发送
- powershell - 列出打开的 Web URL
- javascript - reactjs中如何获取文件的文件长度
- matlab - 使用 Gurobi 运行 MIQP:如何提高时间性能?
- css - 页脚隐藏内容
- python - Tensorflow 似乎有科学记数法的问题
- java - LinkedList 或 HashSet 等类是否被视为依赖项?
- javascript - 我如何从不同的组件调用默认函数
- matlab - Matlab:按另一个需要年龄的向量对数组进行排序