我在我的一个应用程序中使用 d3.js 图表。
他们在这张图片中
看Charts
对于货币图表上的 Y 轴(参见图片),我希望最大值四舍五入为 400,无论这里的最大条形大小是多少,它都是 358.72 美元,但我想将条形保持在 358.72,但在 Y 轴上它将是 400 限制。
它的代码在这里
tradesChart = [
{
key: "Cumulative Return",
values: [
{
"label" : "6E",
"value" : 100 },
{
"label" : "NG",
"value" : 100 },
{
"label" : "TF",
"value" : 67 } ]
}
];
nv.addGraph(function() {
var chart = nv.models.discreteBarChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value/100 })
.staggerLabels(true)
.showValues(true)
.valueFormat(d3.format('.0%'))
chart.yAxis.tickFormat(function(d) { return d3.format('d')(d*100) + '%'; });
d3.select('#chart-trades svg')
.datum(tradesChart)
.transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
请帮我解决这个问题
您需要修改Y轴刻度的域。通常它是从数据的最大值导出的,语句如下:
yScale.domain([0, d3.max(data, function (d) { return d.v; }) ]);
对于您的情况,您应该将其修改为更像这样:
yScale.domain([0, 400]);
或者,如果您想设置数据的最大值or最小静态值,您可以执行如下操作:
yScale.domain([0, d3.max(data, function (d) { return d.v > 400 ? d.v : 400; }) ]);
一个完整的例子 jsfiddle 是here.
这就是如何使用 D3.js 做到这一点,我不熟悉古老的 nvd3.js 库,所以我不确定如何访问秤,但我会看一下,看看是否能找到它。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)