0

を使って円グラフを表示していVictoryPieます。ラベルが奇妙に重なり合っているので、VictoryLegend だけを使用したいと思います。この例を見つけましたjsfiddle: https://jsfiddle.net/boygirl/1Lu96jq0/

jsfiddle の例ではcolorScale、次のように 内で色を指定しています。colorScale={["tomato", "orange", "gold"]}

ただし、私の円グラフは動的であり、ユーザーの入力に依存するため、必要な色数を予測できません。VictoryPie で行うように、VictoryLegend 内で試しcolorScale="blue"てみました。円グラフは正しいですが、凡例のラベルはすべて黒です。余談ですが、私の実装のラベルも、例のように縦に積み上げて表示されるのではなく、ページ全体に横に広げて表示されます。

私のレンダリングは次のようになります。

render() {
      const {
          data,
          pieChartData,
          beyondBudget,
          showResults,
          total,
          pieLegend
      } = this.state;
      const questions = data.questions;
      return (
          <div>
              {questions.map((q, i) => (
                  <UL key={i}>
                      <li>
                          <h4>{q.text}</h4>
                      </li>
                      <li>
                          <Options
                              state={this.state}
                              q={q}
                              i={i}
                              handler={this.handleInputChange}
                          />
                      </li>
                  </UL>
              ))}
              <button onClick={this.computeTotals}>Click</button>

              {console.log("trying the keys approach", this.state.pieLegend)}
                {this.state.showResults &&
                  (<div>
                    <VictoryLegend
                      standalone={false}
                        colorScale="blue"
                        legendWidth={50}
                        title="Legend"
                        centerTitle
                        style={{ border: { stroke: "black" } }}
                        data= {this.state.pieLegend}
                    />
                        <VictoryPie
                            colorScale="blue"
                            data={pieChartData}
                            labels={d => `${d.x}: ${d.y}%`}
                            style={{ parent: { maxWidth: '50%' } }}
                        />

                        {Object.keys(beyondBudget).length > 0 && (
                            <div>
                                <Table>
                                    <tbody>
                                        <tr>
                                            <th>Out of Budget</th>
                                        </tr>
                                        <BrokeBudget
                                            beyondBudget={beyondBudget}
                                        />
                                    </tbody>
                                </Table>
                            </div>
                        )}
                    </div>
                  )
                }
          </div>
      );
  }
  }
4

1 に答える 1

0

ドキュメントに従って：

https://formidable.com/open-source/victory/docs/victory-legend/#colorscale

colorScale タイプ: array[string] colorScale プロパティは、VictoryLegend の各データ シンボルに適用されるカラー スケールを定義します。この prop は、CSS カラーの配列として、または組み込みのカラー スケールの 1 つに対応する文字列として指定する必要があります: "grayscale"、"qualitative"、"heatmap"、"warm"、"cool"、"red" 「緑」「青」。データ オブジェクトで明示的に指定されていない限り、VictoryLegend はインデックスによって各シンボルに色を割り当てます。指定された colorScale の色よりも多くのシンボルがある場合、色が繰り返されます。

colorScale文字列の代わりに文字列の配列を期待しています。これはタイプの不一致であり、おそらく VictoryLegend コンポーネントでそれをエラーとして処理するか、無視してデフォルトの色の凡例をレンダリングします。

それを次のように変更します。

               <VictoryLegend
                    standalone={false}
                    colorScale={["blue"]}
                    legendWidth={50}
                    title="Legend"
                    centerTitle
                    style={{ border: { stroke: "black" } }}
                    data= {this.state.pieLegend}
                />

伝説の向きについては、この小道具を使用してください: https://formidable.com/open-source/victory/docs/victory-legend#orientation

于 2019-08-28T15:38:49.093 に答える