Question

我想定义或控制来自 api 的数据的长度。例如，我有 50 个数据集用于在图表中绘制，但我想定义在图表上仅绘制 30 个数据集。

我创建了一个图表组件如

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

  render() {
    return (

        
      <VictoryChart domainPadding={{ x: 15 }}>
        <VictoryAxis dependentAxis />

        <VictoryBar data={this.props.data} barWidth={20} alignment="start" />
        <VictoryAxis
          style={{
            axisLabel: { padding: 0 },
            tickLabels: {
              textAnchor: "start",
            },
          }}
        />
      </VictoryChart>
    );
  }
}

现在，我正在像子组件一样渲染 BarChart 组件

<BarChart2 data={sampleData}/>

样本数据

sampleData=[ { "x": 1, "y": 134 },
    { "x": 2, "y": 125},
    { "x": 3, "y": 178 },
    { "x": 4, "y": 186 },
    { "x": 5, "y": 115},
    { "x": 6, "y": 189 },
    { "x": 7, "y": 112 },
    { "x": 8, "y": 196 },
    { "x": 9, "y": 110 },
    { "x": 10, "y": 128 },
    { "x": 11, "y": 112 },
    { "x": 12, "y": 170 },
    { "x": 13, "y": 190 },
    { "x": 14, "y": 110 },
    { "x": 15, "y": 128 },
    { "x": 16, "y": 112 },
    { "x": 17, "y": 170 },
    { "x": 18, "y": 19 },
    { "x": 19, "y": 196 },
    { "x": 20, "y": 10 },
    { "x": 10, "y": 110 },
    { "x": 21, "y": 112 },
    { "x": 22, "y": 140 },
    { "x": 23, "y": 150 },
    { "x": 24, "y": 100 },
    { "x": 25, "y": 108 },
    { "x": 26, "y": 122 },
    { "x": 27, "y": 170 },
    { "x": 28, "y": 116 },
    { "x": 29, "y": 187 },
    { "x": 30, "y": 12 },
    { "x": 31, "y": 144 },
    { "x": 32, "y": 120},
    { "x": 33, "y": 118 },
    { "x": 34, "y": 156 },
    { "x": 35, "y": 11},
    { "x": 36, "y": 19 },
    { "x": 37, "y": 192 },
    { "x": 38, "y": 191 },
    { "x": 39, "y": 160 },
    { "x": 40, "y": 118 },
    { "x": 41, "y": 132 },
    { "x": 42, "y": 120 },
    { "x": 43, "y": 180 },
    { "x": 44, "y": 150 },
    { "x": 45, "y": 128 },
    { "x": 46, "y": 142 },
    { "x": 47, "y": 120 },
    { "x": 48, "y": 179 },
    { "x": 49, "y": 126 },
    { "x": 50, "y": 150 },]

Answer 1

这取决于您所说的“控制”或“定义”要绘制的点数是什么意思。如果您的组件接收到超过 30 个数据点，您可以抛出一个异常，或者渲染一条消息说“允许最多 30 个数据点”而不是渲染图表。不过，这可能不是您想要的。

显示前 30 项

正如@nisharg 在评论中建议的那样，您可以对数组的一个子集进行操作，如下所示：

<VictoryBar data={this.props.data.slice(0,30)} barWidth={20} alignment="start" />

这将从 this.props.data 中取出前 30 个元素，而不显示任何其他内容。

显示 50 个项目中的 30 个样本

也许您想要更复杂的东西，例如对输入进行采样。你可以在你的课外创建一个像这样的辅助函数：

const originalData = [1,2,3,4,5,6,7,8,9,10]
const maximumPointsToShow = 6

function sample(data, maxPoints){
    const freq = data.length / maxPoints
    
    const sampledData = []
    for (let i = 0; i < maxPoints; i++){
        const sampledIndex = Math.floor(freq * i)
        sampledData.push(data[sampledIndex])
    }
    return sampledData
}

console.log(sample(originalData, maximumPointsToShow))

并在您的组件中像这样使用它：

<VictoryBar data={sample(this.props.data, 30)} barWidth={20} alignment="start" />

关于如何处理边缘情况（例如数据不足、maxPoints = 0 等）的问题由您决定。

定义在 React 中作为道具传递的数据长度？

1 个答案: