需要一些Victory Charts的帮助

时间：2017-08-22 12:38:38

标签： javascript reactjs svg victory-charts

我正在使用React Victory Charts并需要一些样式方面的帮助。

我是Victory Charts的新手，你的帮助将被高度认可。

我需要帮助：

  1. 轴，条和文本之间的填充。
  2. 有些文字被截断。
  3. 酒吧尺寸。

    4. 这就是我所拥有的：

    <VictoryChart
  width={600}
  domainPadding={{ y: 50 }}>
    <VictoryAxis
        // tickValues specifies both the number of ticks and where
        // they are placed on the axis
        dependentAxis
        style={{
          tickLabels: {fontSize: 15, padding: 15 , width: 60}
        }}
        tickValues={[1, 2, 3, 4]}
        tickFormat={["Yes", "No", "Probably", "Never"]}
      />
  <VictoryBar horizontal
    offsetY={20}
    padding={{ top: 20, bottom: 60 }}
    style={{
      data: { fill: "rgb(23, 52, 76)" },
      parent: { border: "1px solid #ccc"},
    }}
      labels={(d) => ("| " + d.y + " (22%)")}
      data={data}
      x="quarter"
      y="earnings"
  />
</VictoryChart>

    这就是我要得到的。 enter image description here

    这是我希望得到的那种造型。 enter image description here

    请在此处查看HTML：

    ＆＃13;
    ＆＃13; 
    <h4>What I have</h4>
<svg width="400" height="300" role="img" aria-labelledby="undefined-title undefined-desc" viewBox="0 0 400 300" style="border: none; height: 100%; width: 100%; user-select: none; touch-action: none;"><g role="presentation"><line x1="50" x2="50" y1="50" y2="250" role="presentation" shape-rendering="auto" vector-effect="non-scaling-stroke" style="stroke: rgb(37, 37, 37); fill: transparent; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;"></line><g role="presentation"><line x1="50" x2="350" y1="210.97560975609755" y2="210.97560975609755" role="presentation" shape-rendering="auto" vector-effect="non-scaling-stroke" style="stroke: transparent; fill: transparent; pointer-events: none;"></line><line x1="50" x2="49" y1="210.97560975609755" y2="210.97560975609755" role="presentation" shape-rendering="auto" vector-effect="non-scaling-stroke" style="stroke: transparent; fill: transparent; size: 1px;"></line><text dx="0" dy="5.324999999999999" x="34" y="210.97560975609755"><tspan x="34" dx="0" text-anchor="end" style="fill: rgb(37, 37, 37); font-size: 15px; font-family: &quot;Gill Sans&quot;, &quot;Gill Sans MT&quot;, Ser&shy;avek, &quot;Trebuchet MS&quot;, sans-serif; stroke: transparent; padding: 15px; width: 60px; letter-spacing: normal;">Yes</tspan></text></g><g role="presentation"><line x1="50" x2="350" y1="171.9512195121951" y2="171.9512195121951" role="presentation" shape-rendering="auto" vector-effect="non-scaling-stroke" style="stroke: transparent; fill: transparent; pointer-events: none;"></line><line x1="50" x2="49" y1="171.9512195121951" y2="171.9512195121951" role="presentation" shape-rendering="auto" vector-effect="non-scaling-stroke" style="stroke: transparent; fill: transparent; size: 1px;"></line><text dx="0" dy="5.324999999999999" x="34" y="171.9512195121951"><tspan x="34" dx="0" text-anchor="end" style="fill: rgb(37, 37, 37); font-size: 15px; font-family: &quot;Gill Sans&quot;, &quot;Gill Sans MT&quot;, Ser&shy;avek, &quot;Trebuchet MS&quot;, sans-serif; stroke: transparent; padding: 15px; width: 60px; letter-spacing: normal;">No</tspan></text></g><g role="presentation"><line x1="50" x2="350" y1="132.9268292682927" y2="132.9268292682927" role="presentation" shape-rendering="auto" vector-effect="non-scaling-stroke" style="stroke: transparent; fill: transparent; pointer-events: none;"></line><line x1="50" x2="49" y1="132.9268292682927" y2="132.9268292682927" role="presentation" shape-rendering="auto" vector-effect="non-scaling-stroke" style="stroke: transparent; fill: transparent; size: 1px;"></line><text dx="0" dy="5.324999999999999" x="34" y="132.9268292682927"><tspan x="34" dx="0" text-anchor="end" style="fill: rgb(37, 37, 37); font-size: 15px; font-family: &quot;Gill Sans&quot;, &quot;Gill Sans MT&quot;, Ser&shy;avek, &quot;Trebuchet MS&quot;, sans-serif; stroke: transparent; padding: 15px; width: 60px; letter-spacing: normal;">Probably</tspan></text></g><g role="presentation"><line x1="50" x2="350" y1="93.90243902439025" y2="93.90243902439025" role="presentation" shape-rendering="auto" vector-effect="non-scaling-stroke" style="stroke: transparent; fill: transparent; pointer-events: none;"></line><line x1="50" x2="49" y1="93.90243902439025" y2="93.90243902439025" role="presentation" shape-rendering="auto" vector-effect="non-scaling-stroke" style="stroke: transparent; fill: transparent; size: 1px;"></line><text dx="0" dy="5.324999999999999" x="34" y="93.90243902439025"><tspan x="34" dx="0" text-anchor="end" style="fill: rgb(37, 37, 37); font-size: 15px; font-family: &quot;Gill Sans&quot;, &quot;Gill Sans MT&quot;, Ser&shy;avek, &quot;Trebuchet MS&quot;, sans-serif; stroke: transparent; padding: 15px; width: 60px; letter-spacing: normal;">Never</tspan></text></g></g><g role="presentation"><path d="M 50, 202
      L 50, 219
      L 208, 219
      L 208, 202
      L 50, 202
      z" role="presentation" shape-rendering="auto" style="fill: rgb(23, 52, 76); stroke: rgb(23, 52, 76); padding: 8px; stroke-width: 0;"></path><path d="M 50, 163
      L 50, 180
      L 287, 180
      L 287, 163
      L 50, 163
      z" role="presentation" shape-rendering="auto" style="fill: rgb(23, 52, 76); stroke: rgb(23, 52, 76); padding: 8px; stroke-width: 0;"></path><path d="M 50, 124
      L 50, 141
      L 247, 141
      L 247, 124
      L 50, 124
      z" role="presentation" shape-rendering="auto" style="fill: rgb(23, 52, 76); stroke: rgb(23, 52, 76); padding: 8px; stroke-width: 0;"></path><path d="M 50, 85
      L 50, 102
      L 350, 102
      L 350, 85
      L 50, 85
      z" role="presentation" shape-rendering="auto" style="fill: rgb(23, 52, 76); stroke: rgb(23, 52, 76); padding: 8px; stroke-width: 0;"></path><text dx="0" dy="4.97" x="217.89473684210526" y="210.97560975609755"><tspan x="217.89473684210526" dx="0" text-anchor="start" style="fill: rgb(37, 37, 37); font-size: 14px; font-family: &quot;Gill Sans&quot;, &quot;Gill Sans MT&quot;, Ser&shy;avek, &quot;Trebuchet MS&quot;, sans-serif; stroke: transparent; letter-spacing: normal; padding: 10px;">| 1000 (22%)</tspan></text><text dx="0" dy="4.97" x="296.8421052631579" y="171.9512195121951"><tspan x="296.8421052631579" dx="0" text-anchor="start" style="fill: rgb(37, 37, 37); font-size: 14px; font-family: &quot;Gill Sans&quot;, &quot;Gill Sans MT&quot;, Ser&shy;avek, &quot;Trebuchet MS&quot;, sans-serif; stroke: transparent; letter-spacing: normal; padding: 10px;">| 1500 (22%)</tspan></text><text dx="0" dy="4.97" x="257.36842105263156" y="132.9268292682927"><tspan x="257.36842105263156" dx="0" text-anchor="start" style="fill: rgb(37, 37, 37); font-size: 14px; font-family: &quot;Gill Sans&quot;, &quot;Gill Sans MT&quot;, Ser&shy;avek, &quot;Trebuchet MS&quot;, sans-serif; stroke: transparent; letter-spacing: normal; padding: 10px;">| 1250 (22%)</tspan></text><text dx="0" dy="4.97" x="360" y="93.90243902439025"><tspan x="360" dx="0" text-anchor="start" style="fill: rgb(37, 37, 37); font-size: 14px; font-family: &quot;Gill Sans&quot;, &quot;Gill Sans MT&quot;, Ser&shy;avek, &quot;Trebuchet MS&quot;, sans-serif; stroke: transparent; letter-spacing: normal; padding: 10px;">| 1900 (22%)</tspan></text></g></svg>
<h4>What I want</h4>
<svg width="449" height="97"><g id="grid" transform="translate(150,10)"><line x1="0" y1="0" x2="0" y2="0" style="stroke: rgb(157, 157, 157); stroke-width: 1;"></line><line x1="30" y1="0" x2="30" y2="0" style="stroke: rgb(157, 157, 157); stroke-width: 1;"></line><line x1="60" y1="0" x2="60" y2="0" style="stroke: rgb(157, 157, 157); stroke-width: 1;"></line></g><g transform="translate(150,0)" id="yaxis"><g class="tick" transform="translate(0,0)" style="opacity: 1;"><line x2="-1" y2="0"></line><text dy="19.5" x="-130" y="0" type="filter" style="text-anchor: start;">1 - 4 yrs </text></g><g class="tick" transform="translate(0,34)" style="opacity: 1;"><line x2="-1" y2="0"></line><text dy="19.5" x="-130" y="0" type="filter" style="text-anchor: start;">Not sure</text></g><g class="tick" transform="translate(0,68)" style="opacity: 1;"><line x2="-1" y2="0"></line><text dy="19.5" x="-130" y="0" type="filter" style="text-anchor: start;">less than 1yr</text></g><path class="domain" d="M-1,0H0V102H-1"></path></g><g transform="translate(150,0)" class="bars"><rect height="29" x="20" y="0" width="143.48275862068965" style="fill: rgb(23, 52, 76);"></rect><rect height="29" x="20" y="34" width="55.379310344827594" style="fill: rgb(43, 95, 140);"></rect><rect height="29" x="20" y="68" width="20.137931034482758" style="fill: rgb(62, 138, 204);"></rect><text x="168.48275862068965" y="19.5" style="fill: rgb(0, 0, 0); font-size: 12px; overflow: visible;">| 66% (57)</text><text x="80.37931034482759" y="53.5" style="fill: rgb(0, 0, 0); font-size: 12px; overflow: visible;">| 25% (22)</text><text x="45.13793103448276" y="87.5" style="fill: rgb(0, 0, 0); font-size: 12px; overflow: visible;">| 9% (8)</text></g></svg>
    ＆＃13;
    ＆＃13;
    ＆＃13;

1 个答案:

答案 0 :(得分：5)

对于截止的文字，请使用padding上的VictoryChart道具，如下所示：

<VictoryChart padding={{ left: 80, right: 100 }} />

这应该为您提供足够的空间，以防止您的刻度标签和条形标签被切断。请注意，此实例中的domainPadding会在条形图上方和下方添加空格。

要左对齐轴标签，您需要在轴上指定tickLabelComponent，如下所示：

<VictoryAxis tickLabelComponent={<VictoryLabel x={10} textAnchor="start" />} />

要在条和轴之间添加间距，请在轴上使用offsetX道具。它会将轴从左侧与指定的量隔开，而条形图将从左侧开始等于图表本身的padding。

<VictoryAxis offsetX={80} />

以下是这些配置的小提琴：https://jsfiddle.net/mfxtznun/3/

相关问题
最新问题