代码之家 › 专栏 › 技术社区 › buydadip

如何在Victory Pie中指定数据对象内的颜色比例

victory-charts pie-chart reactjs

buydadip · 技术社区 · 8 年前

我用过 VictoryChart 实现一个饼图,它工作得很好。。。

render() {

    const data_distribution = this.state.pie_keys.map((d) => ({x:d, y:this.state.pie_data[d], label:d }));

    return (
      <div className="App">
        <div className="pie_wrapper">
          <VictoryPie
            labelComponent={<VictoryTooltip cornerRadius={0} />}   
            padAngle={0.5}
            innerRadius={100}
            width={400} height={400}
            style={{ 
              labels: { fontSize: 15, fill: "black"},
              data: {
                  fillOpacity: 0.9, stroke: "white", strokeWidth: 3
              }
            }}
            labelRadius={90}
            data = {data_distribution}
          />
        </div>
      </div>
    );
  }

需要注意的是 data_distribution 简单地看如下。。。

data={[
    { x: "Fac of Engineering & Appl Sci", y: 8.557902403495994 },
    { x: "Faculty of Arts and Science", y: 53.775188152464196 },
    { x: "Faculty of Education", y: 13.085700412721534 },
    ...
    ...
  ]}

所以我想知道是否可以为数据对象中的每一块饼设置颜色。文件规定。。。

色阶:“灰度”、“定性”、“热图”、“暖”、“冷”、“红”、“绿”、“蓝”。除非在数据对象中显式指定,否则VictoryPie将按索引为每个切片指定颜色。

这说明你可以,但我不知道怎么做。我试过了。。。

data={[
    { x: "Fac of Engineering & Appl Sci", y: 8.557902403495994, colorScale:"red" },
    { x: "Faculty of Arts and Science", y: 53.775188152464196, colorScale:"red" },
    { x: "Faculty of Education", y: 13.085700412721534, colorScale:"red" },
    ...
    ...
]}

也就是说。。。

const data_distribution = this.state.pie_keys.map((d) => ({x:d, y:this.state.pie_data[d], label:d, colorScale:"red"}));

但是,它们不会变红。我在网上找不到一个例子。这有没有可能?

我知道我可以定义 colorScale: {[...]} 但这不是我要问的。我希望能够从数据对象中设置饼图的每个部分。

5 回复 | 直到 8 年前

Jon Hieb 7 年前

我知道这个问题已经被“回答”了,但我不满意。自从我沮丧地来到这里离开后,我决定发布我的解决方案,希望其他人能从中得到一些好处。

可以使用 style 道具:

<VictoryPie
  data={[
    { x: "Cats", y: 35 },
    { x: "Dogs", y: 40 },
    { x: "Birds", y: 55 }
  ]}
  style={{
    data: {
      fill: ({ y }) =>
        y > 49 ? 'green'
        : y > 39 ? 'yellow'
        : 'tomato'
    }
  }}
/>

在这种情况下,您不应该使用 colorScale 完全。我已经阅读了源代码,据我所知,这是在 VictoryPie .

Chris Wolverton 7 年前

可以根据数据导出填充颜色,但必须提供该逻辑。您接受的答案将基于y值应用颜色,但是您也可以在数据本身中指定颜色,只要您将样式设置为:

<VictoryPie
  data={[
    { x: "Cats", y: 35, yourAttribute: "#0000FF" },
    { x: "Dogs", y: 40, yourAttribute: "#00FF00" },
    { x: "Birds", y: 55, yourAttribute:"#FF0000" }
  ]}
  style={{
    data: {
      fill: (d) => d.yourAttribute
    }
  }}
/>

Vadim Kotov First Zero 8 年前

如果您知道数据呈现顺序,那么您可以按照相同的顺序使用颜色,它将自动按照顺序使用颜色

<VictoryPie
  colorScale={["black", "red", "green", "#4cc9ff", "navy" ]}
  data={sampleData}
/>

Vadim Kotov First Zero 8 年前

我手动添加了一个函数,如果这有助于'var stats=this.state.statistics;

var stat = this.state.statistic;
        if (stats.length>0) {
            if(this.colors.length<stats.length){
                for(let i=0;i<stats.length;i++){
                    this.colors.push(getRandomColor());
                }
            }
        }
        const color = ['#9167f1', '#f26893', '#99cfef', '#99ef9a'];
        const colors = this.colors;`

function getRandomColor() {
    var letters = '0123456789abcdef';
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

feralislatr 7 年前

我想不是 colorScale: "red" ,你想要 fill: "red" 在数据对象中,因为Victory的切片原语只是svg <Path> 元素。