我可以帮助您在图表上显示数据。我正在使用JqPlot。
这是我的代码:
line0 = [["2012-07-31",3.8182],["2012-08-01",3.4000],["2012-08-02",3.7500]];
line1 = [["2012-07-31",4.8182],["2012-08-01",4.4000],["2012-08-02",4.7500]];
line2 = [["2012-07-31",5.8182],["2012-08-01",5.4000],["2012-08-02",5.7500]];
plot1 = $.jqplot('servicechart', [line0,line1,line2], {
legend:{show:false},
title:'<b>Service</b>',
seriesDefaults:{pointLabels:{show:false}},
grid: {background:'#f8f8f8', gridLineColor:'#dbdbdb',borderWidth: 0,shadowDepth: 0},
axes:{
yaxis: { label: 'Service -1 (poor) to 4 (excellent)', min: 1, max: 4, tickInterval: 1,labelRenderer: $.jqplot.CanvasAxisLabelRenderer},
xaxis:{ label: 'Months', renderer:$.jqplot.DateAxisRenderer, tickInterval:'1 month',tickOptions:{formatString:'%b %#d, %Y'} }
},
seriesColors: [ "#329dd5", "#0d8e17", "#f47320"],
highlighter: { tooltipLocation: 's',tooltipAxes: 'both',tooltipSeparator: ' - ',tooltipOffset: 10,sizeAdjust: 8,tooltipFadeSpeed:'slow' }
});
由于某种原因,数据未显示在图表上。有人可以帮我解决这个问题吗?
提前致谢。
答案 0 :(得分:1)
试试这个:
注意以下几点:
/*labelRenderer: $.jqplot.CanvasAxisLabelRenderer*/ //It is not necessary
xaxis:{
min:"2012-07-01" //you need to put min...if not..it doesn't work
highlighter: {
show:true //For obvious reasons
完整示例:http://jsfiddle.net/pabloker/C5W4b/1/
var line0 = [["2012-07-01",1.8182],["2012-08-01",1.4000],["2012-09-01",1.7500]];
var line1 = [["2012-07-01",2.8182],["2012-08-01",2.4000],["2012-09-01",2.7500]];
var line2 = [["2012-07-01",3.8182],["2012-08-01",3.4000],["2012-09-01",3.7500]];
var plot1 = $.jqplot('servicechart', [line0,line1,line2], {
legend:{
show:false
},
title:'<b>Service</b>',
seriesDefaults:{
pointLabels:{
show:false
}
},
grid: {
background:'#f8f8f8',
gridLineColor:'#dbdbdb',
borderWidth: 0,
shadowDepth: 0},
axes:{
yaxis: {
label: 'Service -1 (poor) to 4 (excellent)',
min: 1,
max: 4,
tickInterval: 1
/*labelRenderer: $.jqplot.CanvasAxisLabelRenderer*/
},
xaxis:{
label: 'Months',
renderer:$.jqplot.DateAxisRenderer,
tickInterval:'1 month',
min:"2012-07-01",
tickOptions:{
formatString:'%b %#d, %Y'
}
}
},
seriesColors: [ "#329dd5", "#0d8e17", "#f47320"],
highlighter: {
show:true,
tooltipLocation: 's',
tooltipAxes: 'both',
tooltipSeparator: ' - ',
tooltipOffset: 10,
sizeAdjust: 8,
tooltipFadeSpeed:'slow' }
});