1

我正在尝试显示垂直堆叠的条形图和水平图例。+ 许多其他似乎不起作用的东西（可能忘记了 jqplot 插件？？）。

请参阅我的示例http://jsfiddle.net/supersonique/Zv6u8/1/

任何使这项工作正常工作的想法，我都找不到问题所在。

非常感谢所有帮助者！代码如下。麦克风

$(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'
    }
  });
} );
4

1 回答 1

2

Change renderer of xaxis to $.jqplot.DateAxisRenderer and make sure to add the plugin jqplot.dateAxisRenderer.min.js.

Here is the updated demo.

Demo

于 2013-08-11T03:15:34.770 回答