4

柔軟なグラフに関するドキュメントを読んで、それらを円グラフに適用しようとしています:

import React from 'react'
import { RadialChart, FlexibleXYPlot } from 'react-vis'

const MyChart = ({data}) => (
  <div>
    <FlexibleXYPlot>
      <RadialChart
        data={data}
        colorType="literal"
      />
    </FlexibleXYPlot>
  </div>
)

しかし、これをレンダリングすると、次のようなマークアップが得られます。

<div>
  <div style="width: 100%; height: 100%;">
    <div class="rv-xy-plot " style="width: 0px; height: 0px;">
    </div>
  </div>
</div>

ご覧のとおり、rv-xy-plot要素の寸法は明示的に に設定されてい0pxます。私は何を間違っていますか？レスポンシブ円グラフを作成するにはどうすればよいですか?

4

5 に答える 5

2

私はこれを手伝うことができます。私はサンキーチャートでまったく同じ問題を抱えていました。FlexibleXYPlotドキュメントでは、チャートが応答するように見えますが、そうではありません。

正しいアプローチは、このページの下部に示されています - https://uber.github.io/react-vis/documentation/api-reference/flexible-plots

したがって、RadialChart の場合は、次のようにする必要があります。

import { RadialChart, makeVisFlexible} from "react-vis";

const FlexRadialChart=makeVisFlexible(RadialChart)

次に、レスポンシブ コードを組み込んで作成した新しいコンポーネントを使用します。

      <FlexRadialChart
        data={data}
        colorType="literal"
      />
于 2019-04-26T13:23:03.093 に答える