我正在使用以下代码在nvd3中创建一个multichart:
var data =
[{"variableName":"HHs_Index_Income_75K_9999K","contribution":6717418.0,"roi":0.0,"date":1.1997306E12,"spend":131.0},
{"variableName":"HHs_Index_Income_75K_9999K","contribution":6563584.0,"roi":0.0,"date":1.2033594E12,"spend":128.0},
...
...
...
{"variableName":"HHs_Index_Income_75K_9999K","contribution":6819974.0,"roi":0.0,"date":1.243881E12,"spend":133.0}];
function formatOverviewPerformanceTrendsData(data, y1Var , y2Var ) {
var finalData = new Array();
var y1Array = new Array();
var y2Array = new Array();
for(var i=0;i<data.length;i++){
var dataElement = data[i];
//var datePattern =new RegExp('/','g');
//var dateString = dataElement['date'].replace(datePattern,'');
var dateString = dataElement['date'];
var objArray1 = {x: dateString , y:dataElement[y1Var.toLowerCase()]};
var objArray2 = {x: dateString , y:dataElement[y2Var.toLowerCase()]};
y1Array.push(objArray1);
y2Array.push(objArray2);
}
var y1Obj = { key:y1Var , type:'line' , yAxis:'1' , values:y1Array};
var y2Obj = { key:y2Var , type:'line' , yAxis:'2' , values:y2Array};
finalData.push(y1Obj);
finalData.push(y2Obj);
return finalData;
}
function render_overview_trends_screen(data) {
var contributionROIData = formatOverviewPerformanceTrendsData(data,'Contribution','ROI');
var revenueTrendsData = formatOverviewPerformanceTrendsData(data,'Contribution','Spend');
nv.addGraph(function() {
var chart = nv.models.multiChart().margin({
top : 10,
right : 80,
bottom : 40,
left : 80
}).color(d3.scale.category10().range());
chart.xAxis.axisLabel('Date').
tickFormat(function(d) {
return d3.time.format('%x')(new Date(d));
});
chart.yAxis1.axisLabel('Contribution');
chart.yAxis2.axisLabel('ROI');
d3.select('#chart1 svg').datum(contributionROIData)
.transition().duration(500).call(chart);
return chart;
});
}
document.body.onload = function(){
render_overview_trends_screen(data);
}
但图表制作的线条在图表区域外绘制。
请帮我解决这个问题。至于究竟是什么问题?你如何修改nvd3图表的规模/范围?
非常感谢!