Я не могу получить целевой график с библиотекой перезарядок - PullRequest
Новая
       6

Я не могу получить целевой график с библиотекой перезарядок

0 голосов
/ 11 мая 2018

Я здесь, потому что я пытаюсь построить диаграмму, используя библиотеку recharts, и после многих разных попыток получить желаемый результат я все еще не получаю его.

Моя целевая графика должна выглядеть примерно так:

enter image description here

Я пробовал много разных вещей, таких как гистограммы, составные гистограммы, составные диаграммы, гистограммы и т. Д., И я не могу получить желаемый результат.

Ближайший результат, который я пока получаю, таков:

enter image description here

Но в данный момент я пытаюсь выровнять черные полосы сверхуиз оранжевых (с помощью stackId) я получаю это:

enter image description here

Кто-нибудь знает, могу ли я получить нужную графику с этой библиотекой?Мы будем благодарны за любую помощь.

Код второго рисунка такой: 

const customData = [
  { name: 'food', uv: 1000, pv: [1001,2000], amt: 4500, time: 1, uvError: [100, 50], pvError: [110, 20] },
  { name: 'cosmetic', uv: 2300, pv: [2301,3700], amt: 6500, time: 2, uvError: 120, pvError: 50 },
  { name: 'storage', uv: 2200, pv: [2201,3500], amt: 5000, time: 3, uvError: [120, 80], pvError: [200, 100] },
  { name: 'digital', uv: 1800, pv: [1801,3300], amt: 4000, time: 4, uvError: 100, pvError: 30 },
];

class POC extends React.Component {
  render() {
    return (
      <div className="bar-chart-wrapper">
        <ComposedChart width={400} height={400} data={customData}>
          <XAxis />
          <YAxis />
          <Bar dataKey="uv" fill="#ff7300">
            <ErrorBar dataKey="pvError" width={5} strokeWidth={10} stroke="green" direction="y" />
          </Bar>
          <Bar dataKey="pv">
          </Bar>
        </ComposedChart>
      </div>
    );
  }
}

Код третьего рисунка такой же, но я добавляю prop stackId = "0" воба бара.

Заранее спасибо всем, кто может мне помочь.

1 Ответ

0 голосов
/ 16 мая 2018

Наконец-то я нашел решение сам.

При поиске в Интернете я обнаружил эту проблему Речарта, которая связала меня с этой другой .Там я нашел демо jsfiddle, с этим кодом и несколькими изменениями я получил желаемый результат.

Это конечный результат:

enter image description here

А это код: 

const data = [
  { name: 'food', uv: 2000, pv: 1600, amt: 4500, time: 1, uvError: [100, 50], pvError: [110, 20] },
  { name: 'cosmetic', uv: 3300, pv: 2000, amt: 6500, time: 2, uvError: 120, pvError: 50 },
  { name: 'storage', uv: 3200, pv: 1398, amt: 5000, time: 3, uvError: [120, 80], pvError: [200, 100] },
  { name: 'digital', uv: 2800, pv: 2400, amt: 4000, time: 4, uvError: 100, pvError: 30 },
];

class POC extends React.Component {
  render() {
    return (
      <div className="bar-chart-wrapper">
        <BarChart width={600} height={300} data={data} margin={{top: 5, right: 30, left: 20, bottom: 5}}>
          <XAxis xAxisId={0} />
          <XAxis xAxisId={1} hide/>
          <YAxis/>
          <CartesianGrid strokeDasharray="3 3"/>
          <Bar dataKey="uv" xAxisId={1} fill="#000" />
          <Bar dataKey="pv" xAxisId={0} fill="#ff7300">
            <ErrorBar dataKey="pvError" width={5} strokeWidth={10} stroke="green" />
          </Bar>
        </BarChart>
      </div>
    );
  }
}

Надеюсь, это поможет и кому-то еще.

Спасибо!

...