鉴于我有这个图表配置:
const data = [
{ x: 1, y: 13000 },
{ x: 2, y: 16500 },
{ x: 3, y: 14250 },
{ x: 4, y: 19000 },
{ x: 5, y: 19302 }
];
<VictoryChart padding={0} height={200} style={{ display: "block" }}>
<VictoryAxis
style={{
axis: { display: "none" },
grid: {
stroke: lineColor,
display: x => {
return x == 1 || x == data.length ? "none" : "";
}
},
ticks: { display: "none" },
tickLabels: { display: "none" }
}}
/>
<VictoryLine
interpolation="monotoneX"
data={data}
style={{
data: { stroke: "#fff", opacity: 1.0, strokeWidth: "5px" },
labels: { fontSize: 12 },
parent: { border: "1px solid #ccc" }
}}
/>
<VictoryLabel
x={30}
y={30}
style={{
stroke: "#fff",
fill: "#fff",
fontSize: "25px",
fontFamily: "Roboto",
fontWeight: "bold"
}}
text={number}
/>
</VictoryChart>
但是,我真的需要在折线图中添加一个小填充到顶部/底部。我同时尝试了domainPadding
和/或padding
。
从白线到底部/顶部添加填充的正确方法是什么?当然,轴线必须保持完整。
答案 0 :(得分:1)
通过调整domain
本身的VictoryAxis
设置来工作:
domain={{ x: [0.8, 5.2], y: [10000, 20000] }}