时间戳

首页 > 解决方案 > 散点图仍然是灰色的

reactjs - 散点图仍然是灰色的

问题描述

我正在使用 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;

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

在这里查看data prop 的文档，似乎我应该能够通过“填充”参数指定颜色。

如果有人对我做错了什么有建议，我会很高兴听到他们的意见。

标签： reactjsplotvictory-charts

解决方案

我知道它已经晚了，但它会帮助某人。在victoryScatter 中使用style prop 将解决您的问题。

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

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

推荐阅读