我想在由条形图和线条组成的组合图表上绘制数据点,每个条形图都有自己的数据集。
例如,我希望每个 Bar 从 data.points
获得一个值,但是从对象数组中获取其值的行,data.content
.
这两个数据集是有区别的,尽管它们都是时间序列。
数据形状示例:
const data = {
points: [{
value: 80,
timestamp: 2010-01-09
}],
content: [{
date_posted: 2010-01-10,
content_id: 'xewr23r3g29w0'
}]
}
我是否能够为每个图表组件单独使用这些数据集,还是必须遍历数据并以某种方式将其标准化?
同样供引用的是我的
ComposedChart
实例的代码.<ComposedChart width={600} height={400} data={data} margin={margin} legendType="circle">
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="timestamp" tickFormatter={this.formatDate} height={40} />
<YAxis />
<Legend iconType="circle" />
<Bar dataKey="content_id" barSize={20} fill="#413ea0" />
<Line name="Selected Period" type="monotone" dataKey="value" stroke={colors.blue} />
</ComposedChart>
最佳答案
您应该能够分别向 Bar & Line 添加 data 属性:
<Bar data={data.content} ... />
<Line data={data.points} ... />
我在尝试为区域和线组合 2 个数据集时遇到了问题,其中区域不接受数据属性。我是这样解决的:<ResponsiveContainer width="100%" height={300}>
<ComposedChart
data={myAreaData}
...
>
<XAxis ... />
<YAxis ... />
<Legend layout="vertical" align="right" verticalAlign="middle" />
<Area
// does not accept 'data' attribute (!)
...
/>
<Line data={myLineData} ... />
</ComposedChart>
</ResponsiveContainer>
关于reactjs - 使用多个数据集重新绘制 ComposedChart?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54096095/