时间戳

首页 > 解决方案 > 多系列在 Recharts 的条形图中不起作用

recharts - 多系列在 Recharts 的条形图中不起作用

问题描述

我需要使用以下格式之一创建条形图。数据1 或数据2

const data1 = [ { day: 'ABC', data :[ {job_name: "Mon", value: 4}, {job_name: "Tue", value: 5}, {job_name: "Thu", value: 18}, {job_name: "Fri", value: 5} ] }, { day: 'DEF', data :[ {job_name: "Mon", value: 12}, {job_name: "Tue", value: 15}, {job_name: "Wed", value: 18}, {job_name: "Fri", value: 8} ] }, { day: 'XYZ', data :[ {job_name: "Mon", value: 12}, {job_name: "Tue", value: 15}, {job_name: "Wed", value: 18}, {job_name: "Thu", value: 8} ] } ];

const data2 = [ { day: 'Mon', data :[ {job_name: "ABC", value: 4}, {job_name: "DEF", value: 5}, {job_name: "XYZ", value: 8} ] }, { day: 'Tue', data :[ {job_name: "ABC", value: 12}, {job_name: "DEF", value: 15}, {job_name: "XYZ", value: 18} ] }, { day: 'Wed', data :[ {job_name: "DEF", value: 15}, {job_name: "XYZ", value: 18} ] }, { day: 'Thu', data :[ {job_name: "ABC", value: 12}, {job_name: "XYZ", value: 18} ] }, { day: 'Fri', data :[ {job_name: "ABC", value: 12}, {job_name: "DEF", value: 15} ] } ];

标签： recharts

解决方案

简短的回答，你不能。您的示例中的数据形状不适合 Rechart。

请查阅 Rechart - BarChart -> data的文档并相应地重塑您的数据。

以下是同一页面所需数据格式的示例：

const data = [
  {
    "name": "Page A",
    "uv": 4000,
    "pv": 2400,
    "amt": 2400
  },
  {
    "name": "Page B",
    "uv": 3000,
    "pv": 1398,
    "amt": 2210
  }

namex 轴数据标签在哪里uv，pv和amt是数据系列的值。

所以更多的例子：

const data = [
  {
    "name": "2019-11-01",
    "morning_temp": 8,
    "midday_temp": 14,
    "evening_temp": 10
  },
  {
    "name": "2019-11-02",
    "morning_temp": 5,
    "midday_temp": 18,
    "evening_temp": 7
  },
   ...

虽然根据我自己的经验，改变你的形状可能具有挑战性，并且可能最终会产生一个高度复杂的函数。如果您无法更改数据形状，您可以查看react-vis -> sample，因为 react-vis 的数据形状看起来更类似于您的示例。

无论哪种情况，数据都必须具有正确的形状。

推荐阅读