数据不适用于VictoryBar图表

huangapple go评论65阅读模式
英文:

The data does not fit on the VictoryBar chart

问题

我使用Victory库创建了一个图表。我需要构建一个分组的VictoryBar,因此我使用VictoryGroup来实现。

但是我的数据量很大,数据不适合在图表上显示。我应该如何扩大图表,以使y轴数据不混在一起?

如果数据较少,数据会显示在图表上。

我尝试更改'offset'和'barWidth'参数,但没有帮助。

英文:

I make a graph using the Victory library. I need to build a grouped VictoryBar, so I use VictoryGroup to do that.

But I have a lot of data, and the data doesn't fit on the graph. How can I enlarge the graph so that the y-axis data doesn't get mixed up?

If there is less data, the data is placed on the graph

https://codesandbox.io/s/zen-edison-fb8dy4?file=/src/App.js

import "./styles.css";
import plotData from "./data.json";
import React from "react";
import { VictoryBar, VictoryChart, VictoryGroup } from "victory";
export default function App() {
  let arr1 = [];
  let arr2 = [];
  let arr1Sum = 0;
  let arr2Sum = 0;

  plotData.map((plotData, index) => {
    arr1Sum += plotData.ofac_share;
    arr2Sum += plotData.non_ofac_share;
  });

  plotData.map((plotData, index) => {
    arr1.push({
      y: (plotData.ofac_share / arr1Sum) * 100,
      x: plotData.validator
    });
    arr2.push({
      y: (plotData.non_ofac_share / arr2Sum) * 100,
      x: plotData.validator
    });
  });

  return (
    <VictoryChart>
      <VictoryGroup offsetY={10} colorScale={["tomato", "orange"]}>
        <VictoryBar horizontal barWidth={3} data={arr1} />
        <VictoryBar horizontal barWidth={3} data={arr2} />
      </VictoryGroup>
    </VictoryChart>
  );
}

enter image description here

I tried changing the 'offset' and 'barWidth' parameter, but it didn't help me

答案1

得分: 0

根据文档以及其他布局配置,VictoryChart 组件支持 height 属性:

<VictoryChart height={600}>
	<VictoryGroup
		offsetY={10}
		colorScale={['tomato', 'orange']}
	>
		<VictoryBar
			horizontal
			barWidth={3}
			data={arr1}
		/>
		<VictoryBar
			horizontal
			barWidth={3}
			data={arr2}
		/>
	</VictoryGroup>
</VictoryChart>;

这是相关Victory文档部分的链接,但以下是该链接摘要的片段:

Victory组件在默认的灰度主题中定义了默认的宽度、高度和填充属性。

希望这能帮到你。

英文:

As per documentation, as well as other layout configurations, the VictoryChart component supports a height property:

&lt;VictoryChart height={600}&gt;
	&lt;VictoryGroup
		offsetY={10}
		colorScale={[&#39;tomato&#39;, &#39;orange&#39;]}
	&gt;
		&lt;VictoryBar
			horizontal
			barWidth={3}
			data={arr1}
		/&gt;
		&lt;VictoryBar
			horizontal
			barWidth={3}
			data={arr2}
		/&gt;
	&lt;/VictoryGroup&gt;
&lt;/VictoryChart&gt;;

Here is the link to the relevant Victory documentation section, but here is a snippet from that link that summarises:

> Victory components have default width, height, and padding props defined in the default grayscale theme.

Hope this helps.

huangapple
  • 本文由 发表于 2023年2月16日 04:03:17
  • 转载请务必保留本文链接:https://go.coder-hub.com/75464915.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定