Question

我想在组成图表的数据点上绘制数据点，该图表由条形图和线形图组成，分别具有各自的数据集。

例如，我希望每个Bar从data.points获取一个值，但是Lines从对象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>

Answer 1

您应该能够分别向 Bar & Line 添加数据属性：

<Bar data={data.content} ... />
<Line data={data.points} ... />

我在尝试为 Area 和 Line 合并 2 个数据集时遇到了问题，其中 Area 不接受数据属性。我是这样解决的：

<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>

绘制具有多个数据集的ComposedChart？

1 个答案: