我遇到了nvd3的问题,我正在获得一个正确渲染的折线图,但是交互式指南似乎没有正常工作.目前,当它被渲染并且我将鼠标移动到图表上时,它仅显示第一个日期和最后一个日期.任何帮助将不胜感激.
码:
<script src="forecast/static/nvd3/lib/d3.v3.js"></script>
<script src="forecast/static/nvd3/nv.d3.js"></script>
<script src="forecast/static/nvd3/src/core.js"></script>
<script src="forecast/static/nvd3/src/tooltip.js"></script>
<script src="forecast/static/nvd3/src/utils.js"></script>
<script src="forecast/static/nvd3/src/interactiveLayer.js"></script>
<script src="forecast/static/nvd3/src/models/legend.js"></script>
<script src="forecast/static/nvd3/src/models/axis.js"></script>
<script src="forecast/static/nvd3/src/models/scatter.js"></script>
<script src="forecast/static/nvd3/src/models/line.js"></script>
<script src="forecast/static/nvd3/src/models/lineChart.js"></script>
<link type="text/css" rel="stylesheet" href="forecast/static/nvd3/nv.d3.css" />
<title>Foreign Exchange</title>
<body>
<h1>Foreign Exchange</h1>
<div id="chartZoom">
<a href="#" id="zoomIn">Zoom In</a> <a href="#" id="zoomOut">Zoom Out</a>
</div>
<div id="fx" class='with-transitions'>
<svg></svg>
</div>
</body>
<script type="text/javascript">
nv.addGraph(function() {
var chart = nv.models.lineChart();
var fitScreen = false;
var width = 600;
var height = 300;
var zoom = 1;
chart.useInteractiveGuideline(true);
chart.xAxis
.axisLabel('Time (days)')
.rotateLabels(-45) …我目前正在网站上使用NVD3来绘制图表,其中一个页面有6个图表.我目前只为六个图表添加了6个函数,但我觉得这不是解决问题的最优雅方式.以下是相关html/javascript代码的示例:
<div id="chicago" class='with-3d-shadow with-transitions chart'>
<svg> </svg>
</div>
nv.addGraph(function() {
var chicago = nv.models.lineChart()
.margin({top: 30, right: 60, bottom: 50, left: 80})
.x(function(d,i) { return i })
.color(d3.scale.category10().range());
chicago.transitionDuration(500);
chicago.xAxis.tickFormat(function(d) {
var dx = testdata[0].values[d] && testdata[0].values[d].x || 0;
if (dx > 0) {
return d3.time.format('%x')(new Date(dx))
}
return null;
});
chicago.yAxis
.axisLabel('Price ($/Dth)')
.tickFormat(function(d) { return '$' + d3.format(',.2f')(d) });
nv.log(testdata);
d3.select('#chicago svg')
.datum(testdata)
.call(chicago);
nv.utils.windowResize(chicago.update);
return chicago;
});
我如何包装该函数,以便我可以多次重复使用它而不必重复它并替换每个图形的名称(在本例中为"芝加哥")？