VictoryChart / VictoryLine忽略填充设置

时间:2017-05-22 14:40:34

标签: reactjs victory-charts

鉴于我有这个图表配置:

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>

然后我可以看到这样的结果: Sample chart

但是,我真的需要在折线图中添加一个小填充到顶部/底部。我同时尝试了domainPadding和/或padding

从白线到底部/顶部添加填充的正确方法是什么?当然,轴线必须保持完整。

1 个答案:

答案 0 :(得分:1)

通过调整domain本身的VictoryAxis设置来工作:

domain={{ x: [0.8, 5.2], y: [10000, 20000] }}