javascript - colorScale 属性适用于 VictoryPie 但不适用于 VictoryLegend

Question

我正在使用VictoryPie. 由于标签都奇怪地重叠，我想只使用 VictoryLegend。我找到了这个例子jsfiddle：https ://jsfiddle.net/boygirl/1Lu96jq0/

jsfiddle 示例指定内部的颜色colorScale，如下所示：colorScale={["tomato", "orange", "gold"]}

但是，我的饼图是动态的，并且取决于用户输入，所以我无法预测我需要多少颜色。我colorScale="blue"在 VictoryLegend 里面试过，就像在 VictoryPie 里面做的饼图是正确的，但是所有的图例标签都是黑色的。顺便说一句，我的实现中的标签也不会像示例中那样垂直堆叠显示，而是在页面上水平扩展。

我的渲染看起来像这样：

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

Answer 1

根据文档：

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

colorScale 类型：array[string] colorScale 属性定义了应用于 VictoryLegend 中每个数据符号的色标。这个道具应该以 CSS 颜色数组的形式给出，或者作为对应于内置色阶之一的字符串给出：“灰度”、“定性”、“热图”、“暖色”、“冷色”、“红色”， “绿，蓝”。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