Question

我正在使用React Victory来绘制项目中的不同数据集和函数。但是我无法为散点图着色。

我尝试使用以下代码：

    import React, { Component } from "react";
    import { VictoryChart, VictoryScatter, VictoryTheme } from 'victory';

    import './input_component.css'

    class InputComponent extends Component {
        constructor(props) {
            super(props);
            this.state = {  }
        }

    render() { 
        return ( 
        <div className = "input_layer">
            <VictoryChart
            theme={VictoryTheme.material}
            domain={{ x: [-1, 1], y: [-1, 1] }}>
                <VictoryScatter
                size={5}
                data={[{x:-0.7, y:1, fill: "blue"}, {x:0.5, y:-0.2, fill: "red"}]}
                />
            </VictoryChart>
        </div> 

        );
    }
  }

  export default InputComponent;

由此我得到了一个散点图，但是所有数据点都是灰色的，而不是我指定为“填充”参数的颜色。

看一下数据道具here的文档，看来我应该能够通过“ fill”参数指定颜色。

如果有人对我做错的事情有建议，我会很高兴听到他们的声音。

Answer 1

我知道已经晚了，但是可以帮助别人。在victoryScatter中使用样式道具将解决您的问题。

<VictoryScatter
    size={5}
    data={[{x:-0.7, y:1, fill: "blue"}, {x:0.5, y:-0.2, fill: "red"}]}
    style={{
    data: {
      fill: ({ datum }) => datum.fill,
    }
  }}
/>

您可以在样式道具中添加所需的任何样式属性。

散点图保持灰色

1 个答案: