Javascript JQPlot无法渲染垂直堆叠条和水平图例
我试图有垂直堆叠的酒吧和水平图例以及显示。 +许多其他的东西似乎不起作用(可能忘记了一个jqplot插件??) 看我的例子 要想让这一切正常运行,我找不到原因 非常感谢所有的帮助者! 代码如下。 迈克Javascript JQPlot无法渲染垂直堆叠条和水平图例,javascript,jquery,canvas,jqplot,Javascript,Jquery,Canvas,Jqplot,我试图有垂直堆叠的酒吧和水平图例以及显示。 +许多其他的东西似乎不起作用(可能忘记了一个jqplot插件??) 看我的例子 要想让这一切正常运行,我找不到原因 非常感谢所有的帮助者! 代码如下。 迈克 将xaxis的渲染器更改为$.jqplot.DateAxisRenderer,并确保添加插件jqplot.DateAxisRenderer.min.js 这是最新的演示 $(document).ready( function() { $.jqplot.config.enablePlugins =
将
xaxis
的渲染器更改为$.jqplot.DateAxisRenderer
,并确保添加插件jqplot.DateAxisRenderer.min.js
这是最新的演示
$(document).ready( function() {
$.jqplot.config.enablePlugins = true;
var cd = [['2013-08-02',79.69],['2013-08-03',279.47],['2013-08-04',260.96],['2013-08-05',87.12],['2013-08-06',262.89],['2013-08-07',459.44],['2013-08-08',293.76]];
var fn = [['2013-08-02',212.18],['2013-08-03',61.47],['2013-08-04',238.26],['2013-08-05',125.06],['2013-08-06',184.34],['2013-08-07',140.03],['2013-08-08',495.81]];
var pi = [['2013-08-02',35.96],['2013-08-03',146.12],['2013-08-04',71.30],['2013-08-05',159.97],['2013-08-06',132.18],['2013-08-07',225.57],['2013-08-08',134.24]];
var pr = [['2013-08-02',1405.27],['2013-08-03',412.96],['2013-08-04',465.90],['2013-08-05',3784.06],['2013-08-06',186.37],['2013-08-07',120.32],['2013-08-08',143.77]];
var plot1 = $.jqplot('chart1', [cd,fn,pi,pr], {
// Tell the plot to stack the bars.
stackSeries: true,
title: 'Jqplot test',
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barPadding: 1,
barWidth: 50,
barMargin: 25,
highlightMouseDown: true
},
pointLabels:{
show:true,
stackedValue: true
}
},
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
tickOptions: {
fontFamily: 'Georgia',
fontSize: '10pt',
angle: -30
}
},
axes: {
xaxis: {
label : "X-Label",
pad: 1,
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions: {
formatString: '%b %#d',
formatter: $.jqplot.DateTickFormatter
}
},
yaxis: {
label : "Y-Label",
tickOptions: {
formatString: '$%.2f'
}
}
},
highlighter: {
sizeAdjust: 7.5
},
cursor: {
show: true,
tooltipLocation:'ne'
},
series:[
{label:'Cd', color: 'blue'},
{label:'Fn', color: 'red'},
{label:'Pi', color: 'green'},
{label:'Pr', color: 'grey'}
],
legend: {
show: true,
location: 'n',
placement: 'outsideGrid',
fontSize: '1em'
}
});
} );