Question

我需要使用以下格式之一创建条形图。 data1或data2

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} ] } ];

Answer 1

简短的回答，不能。您样本中数据的形状不适用于Rechart。

请查阅Rechart - BarChart -> data的文档，并相应地调整数据的形状。

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

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

其中name是x轴数据标签，而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的数据形状看起来与样本更相似。

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

多系列在图表的条形图中不起作用

1 个答案: