我正在使用 React Victory Charts，需要一些样式方面的帮助。
我是 Victory Charts 的新手，您的帮助将被高度接受。
我需要帮助:
这是我的:
<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>
这就是我得到的。
这就是我想要的样式。
在此处查看 HTML:
<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: "Gill Sans", "Gill Sans MT", Ser­avek, "Trebuchet MS", 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: "Gill Sans", "Gill Sans MT", Ser­avek, "Trebuchet MS", 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: "Gill Sans", "Gill Sans MT", Ser­avek, "Trebuchet MS", 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: "Gill Sans", "Gill Sans MT", Ser­avek, "Trebuchet MS", 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: "Gill Sans", "Gill Sans MT", Ser­avek, "Trebuchet MS", 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: "Gill Sans", "Gill Sans MT", Ser­avek, "Trebuchet MS", 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: "Gill Sans", "Gill Sans MT", Ser­avek, "Trebuchet MS", 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: "Gill Sans", "Gill Sans MT", Ser­avek, "Trebuchet MS", 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>
最佳答案
要 chop 文本，请使用 padding支持 VictoryChart像这样:
<VictoryChart padding={{ left: 80, right: 100 }} />
这应该给你足够的空间来防止你的刻度标签和条形标签被切断。注意 domainPadding在这种情况下，在条形图上方和下方添加空间。
要左对齐轴标签，您需要指定 tickLabelComponent在轴上，像这样:
<VictoryAxis tickLabelComponent={<VictoryLabel x={10} textAnchor="start" />} />
要在条形图和轴之间添加间距，请使用 offsetX支撑在轴上。它将轴与左侧间隔指定的量，而条形图与左侧的间隔等于 padding。在图表本身上。
<VictoryAxis offsetX={80} />
下面是这些配置的 fiddle :https://jsfiddle.net/mfxtznun/3/
关于javascript - 在胜利图表方面需要一些帮助，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45817909/
当我使用Bundler时，是否需要在我的Gemfile中将其列为依赖项？毕竟，我的代码中有些地方需要它。例如，当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试，但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/4758609/
我注意到像bundler这样的项目在每个specfile中执行requirespec_helper我还注意到rspec使用选项--require，它允许您在引导rspec时要求一个文件。您还可以将其添加到.rspec文件中，因此只要您运行不带参数的rspec就会添加它。使用上述方法有什么缺点可以解释为什么像bundler这样的项目选择在每个规范文件中都需要spec_helper吗？ 最佳答案 我不在Bundler上工作，所以我不能直接谈论他们的做法。并非所有项目都checkin.rspec文件。原因是这个文件，通常按照当前的惯例，只
我实际上是在尝试使用RVM在我的OSX10.7.5上更新ruby，并在输入以下命令后:rvminstallruby我得到了以下回复:Searchingforbinaryrubies,thismighttakesometime.Checkingrequirementsforosx.Installingrequirementsforosx.Updatingsystem.......Errorrunning'requirements_osx_brew_update_systemruby-2.0.0-p247',pleaseread/Users/username/.rvm/log/138121
我正在阅读SandiMetz的POODR，并且遇到了一个我不太了解的编码原则。这是代码:classBicycleattr_reader:size,:chain,:tire_sizedefinitialize(args={})@size=args[:size]||1@chain=args[:chain]||2@tire_size=args[:tire_size]||3post_initialize(args)endendclassMountainBike此代码将为其各自的属性输出1,2,3,4,5。我不明白的是查找方法。当一辆山地自行车被实例化时，因为它没有自己的initialize方法
只是想确保我理解了事情。据我目前收集到的信息，Cucumber只是一个“包装器”，或者是一种通过将事物分类为功能和步骤来组织测试的好方法，其中实际的单元测试处于步骤阶段。它允许您根据事物的工作方式组织您的测试。对吗？ 最佳答案 有点。它是一种组织测试的方式，但不仅如此。它的行为就像最初的Rails集成测试一样，但更易于使用。这里最大的好处是您的session在整个Scenario中保持透明。关于Cucumber的另一件事是您(应该)从使用您的代码的浏览器或客户端的角度进行测试。如果您愿意，您可以使用步骤来构建对象和设置状态，但通常您
我正在使用RubyonRails3.0.9，我想生成一个传递一些自定义参数的link_toURL。也就是说，有一个articles_path(www.my_web_site_name.com/articles)我想生成如下内容:link_to'Samplelinktitle',...#HereIshouldimplementthecode#=>'http://www.my_web_site_name.com/articles?param1=value1¶m2=value2&...我如何编写link_to语句“alàRubyonRailsWay”以实现该目的？如果我想通过传递一些
这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:Rubysyntaxquestion:Rational(a,b)andRational.new!(a,b)我正在阅读ruby镐书，我对创建有理数的语法感到困惑。Rational(3,4)*Rational(1,2)产生=>3/8为什么Rational不需要new方法(我还注意到例如我可以在没有new方法的情况下创建字符串)？
我想找到在某些文本中找到一些(让它是两个)句子的好方法。什么会更好-使用正则表达式或拆分方法？你的想法？应JeremyStein的要求-有一些例子示例:输入:ThefirstthingtodoistocreatetheCommentmodel.We’llcreatethisinthenormalway,butwithonesmalldifference.IfwewerejustcreatingcommentsforanArticlewe’dhaveanintegerfieldcalledarticle_idinthemodeltostoretheforeignkey,butinthis
我需要用任何语言编写一个算法，根据3个因素对数组进行排序。我以度假村为例(如Hipmunk)。假设我想去度假。我想要最便宜的地方、最好的评论和最多的景点。但是，显然我找不到在所有3个中都排名第一的方法。Example(assumingthereare20importantattractions):ResortA:$150/night...98/100infavorablereviews...18of20attractionsResortB:$99/night...85/100infavorablereviews...12of20attractionsResortC:$120/night
修改(澄清问题)我已经花了几天时间试图弄清楚如何从Facebook游戏中抓取特定信息；但是，我遇到了一堵又一堵砖墙。据我所知，主要问题如下。我可以使用Chrome的检查元素工具手动查找我需要的html-它似乎位于iframe中。但是，当我尝试抓取该iframe时，它是空的(属性除外):如果我使用浏览器的“查看页面源代码”工具，这与我看到的输出相同。我不明白为什么我看不到iframe中的数据。答案不是它是由AJAX之后添加的。(我知道这既是因为“查看页面源代码”可以读取Ajax添加的数据，也是因为我有b/c我一直等到我可以看到数据页面之后才抓取它，但它仍然不存在)。发生这种情况是因为