reactjs - 有没有办法在同一侧添加多个 y 轴但不重叠图表数据?
问题描述
我正在构建一个支持多个 y 轴的折线图,我从 Victory 的文档中找到了展示,但中间的 y 轴与图表数据重叠。
https://formidable.com/open-source/victory/gallery/multiple-dependent-axes/
我想知道有没有办法在图表数据区域的最左侧或外部进行样式设置或制作?
当前来自 Victory 的样本: https ://jsfiddle.net/ngmikeng/5m73ktja/
const { VictoryChart, VictoryLine, VictoryAxis, VictoryLabel, VictoryTheme } = Victory;
const renderTarget = document.getElementById('app');
const data = [
[{ x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 3 }, { x: 4, y: 4 }],
[{ x: 1, y: 400 }, { x: 2, y: 350 }, { x: 3, y: 300 }, { x: 4, y: 250 }],
[{ x: 1, y: 75 }, { x: 2, y: 85 }, { x: 3, y: 95 }, { x: 4, y: 100 }]
];
// find maxima for normalizing data
const maxima = data.map(
(dataset) => Math.max(...dataset.map((d) => d.y))
);
const xOffsets = [50, 200, 350];
const tickPadding = [0, 0, -15];
const anchors = ["end", "end", "start"];
const colors = ["black", "red", "blue"];
class App extends React.Component {
render() {
return (
<div>
<VictoryChart
theme={VictoryTheme.material}
width={400} height={400}
domain={{ y: [0, 1] }}
>
<VictoryAxis />
{data.map((d, i) => (
<VictoryAxis dependentAxis
key={i}
offsetX={xOffsets[i]}
style={{
axis: { stroke: colors[i] },
ticks: { padding: tickPadding[i] },
tickLabels: { fill: colors[i], textAnchor: anchors[i] }
}}
// Use normalized tickValues (0 - 1)
tickValues={[0.25, 0.5, 0.75, 1]}
// Re-scale ticks by multiplying by correct maxima
tickFormat={(t) => t * maxima[i]}
/>
))}
{data.map((d, i) => (
<VictoryLine
key={i}
data={d}
style={{ data: { stroke: colors[i] } }}
// normalize data
y={(datum) => datum.y / maxima[i]}
/>
))}
</VictoryChart>
</div>
);
}
}
ReactDOM.render(<App />, renderTarget);
这就是我想要的图表渲染:
解决方案
推荐阅读
- c# - 如何在 c# 中的 app.config 文件中添加路径?
- javascript - 如何单击testcafe中按钮的下边缘
- azure - 使用没有负载平衡器的 terraform 的虚拟机规模集?
- java - 素数 - 我需要澄清代码实现
- laravel - 链接在 Bootstrap Offcanvas 中不起作用
- question-answering - 使用saimpletransformers时如何在wandb中记录工件?
- llvm - 如何链接两个 llvm 模块?
- html - 如何将不和谐机器人连接到网站
- php - 是否可以在 Laravel 8 中按 from 和 to user id 分组
- kubernetes - 为什么 Rancher 在 Kubernetes 中创建虚拟集群?