การสร้างเพจที่มีหลายกราฟ ฉันตัดสินใจใช้ 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));
}
ฉันยังใช้ twitter bootstrap สำหรับเลย์เอาต์ด้วยถ้ามันช่วยได้
แก้ไข
ซอต่อไปนี้ควรมีประโยชน์มากกว่าเนื่องจากมีขยะน้อยกว่า http://jsfiddle.net/Bh578/
กราฟแรกและวินาทีแสดงปัญหาในขณะที่กราฟที่สามแสดงผลตามความคาดหวังของฉัน (เช่น คุณสามารถเห็นทั้งบรรทัด)
ฉันยังได้เพิ่มตัวเลือก useInteractiveGuideline: true เพื่อให้ชัดเจนยิ่งขึ้นว่ามีค่าอยู่นอกพื้นที่กราฟที่มองเห็นซึ่งฉันต้องการเห็นบนแผนภูมิด้วย
fails to find the maximum value
เมื่อดูแผนภูมิแล้ว ดูเหมือนว่าอาจมีปัญหากับชุดข้อมูลของคุณ คุณกำลังพยายามทำอะไรให้สำเร็จที่นี่?? - person shabeer90   schedule 30.05.2014fails to find the maximum value
หมายความว่าชุดของค่าบนแกน y บนกราฟบางกราฟมีขนาดเล็กกว่ากราฟอื่นอย่างเห็นได้ชัด โดยไม่มีระบบที่ชัดเจนสำหรับฉัน ลักษณะการทำงานที่คาดหวังคือชุดข้อมูลใดๆ จะแสดงกราฟโดยที่มองเห็นเส้นทั้งหมดได้ แต่นั่นไม่ใช่กรณีที่ชัดเจน ฉันไม่รู้ว่าจะต้องค้นหาปัญหาชุดข้อมูลใด คุณช่วยแนะนำฉันหน่อยได้ไหม มันคือจำนวนเต็มทั้งหมด ด้วยการพิมพ์ที่อ่อนแอของจาวาสคริปต์ การแสดงพวกมันว่า strins ไม่น่าจะเป็นปัญหาใช่ไหม ขอบคุณมาก - person rioted   schedule 30.05.2014