rio*_*ted 2 javascript html5 d3.js twitter-bootstrap nvd3.js
建立一个包含多个图形的页面,我决定使用NVD3.
问题是NVD3无法找到最大值,导致一些无用的图形.
function renderGraph(parent, data) {
function getGraph(svgElement, data) {
var height = 500;
var chart = nv.models.lineChart()
chart.options({
noData: "Not enough data to graph",
transitionDuration: 500,
showLegend: true,
showXAxis: true,
showYAxis: true,
rightAlignYAxis: false
});
chart.xAxis //Chart x-axis settings
.axisLabel(data['x-label'])
.tickFormat(function(d) {
return d3.time.format('%d.%m.%Y')(new Date(+d))
});
chart.yAxis //Chart y-axis settings
.axisLabel(data['y-label'])
.tickFormat(d3.format('.02f'))
;
svgElement //Select the <svg> element you want to render the chart in.
.datum(data['data']) //Populate the <svg> element with chart data...
.call(chart); //Finally, render the chart!
//Update the chart when window resizes.
nv.utils.windowResize(function() { chart.update() });
return chart;
}
var svgELement = d3.select('svg#chart_'+data['code']);
nv.addGraph(getGraph(svgELement, data));
}
Run Code Online (Sandbox Code Playgroud)
我也使用twitter bootstrap进行布局,如果有帮助的话.
编辑
跟随小提琴应该更有用,因为它包含更少的垃圾 http://jsfiddle.net/Bh578/
第一个和第二个图表显示问题,而第三个图表根据我的期望呈现(即你可以看到整行)
我还添加了useInteractiveGuideline:true选项,因此更明显的是,我希望在图表上看到可见图形区域之外的值.