在使用d3.js和nvd3.js时,设置y轴范围的方法如下:
var chart;
nv.addGraph(function() {
chart = nv.models.lineChart()
.margin({left: 100}) // Adjust chart margins to give more space for y-axis labels
.useInteractiveGuideline(true) // We want nice looking tooltips and a guideline!
.showLegend(true) // Show the legend, allowing users to turn on/off line series.
.showYAxis(true) // Show the y-axis
.showXAxis(true) // Show the x-axis
.forceY([0, 100]); // Set the y-axis range from 0 to 100
// Format the y-axis labels as percentages.
chart.yAxis
.tickFormat(d3.format(',.2%'));
// Load the data into the chart.
d3.select('#chart svg')
.datum(data)
.call(chart);
// Update the chart when the window resizes.
nv.utils.windowResize(function() { chart.update() });
return chart;
});
在上面的代码中,.forceY([0, 100])
设置了y轴的范围,从0到100。同时,.tickFormat(d3.format(',.2%'))
设置了y轴标签的格式为百分比。
<div id="chart">
<svg></svg>
</div>
这样,就可以在d3.js和nvd3.js中设置y轴范围了。具体的设置方法可能会因图表类型和数据集而有所不同,但基本思路是相同的。
领取专属 10元无门槛券
手把手带您无忧上云