散点图保持灰色

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;

从这里我得到了一个散点图，但是所有数据点都是灰色的，而不是我指定为 "fill" 参数的颜色。

查看数据属性 here 的文档，似乎我应该能够通过 "fill" 参数指定颜色。

如果有人对我做错了什么提出建议，我很乐意听取他们的意见。

Answer 1

我知道已经晚了，但它会对某人有所帮助。在 victoryScatter 中使用 style 属性将解决你的问题。

<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,
    }
  }}
/>

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

散点图保持灰色

Scatter plot remains grey

plot

reactjs

victory-charts