jquery – jqplot并排堆积条形图

是否可以使用jqplot实现并排堆叠条形图?例如,X轴将是给定月份,并且对于每个月,您将具有一些堆叠条形.

像这样的东西:

注意:我要求的是一些不同的东西,只是一个正常的堆积图表.请查看图片以更好地了解我正在尝试做的事情.

解决方法

是的,有可能这样做.

参考jqplot

代码

$(document).ready(function(){
  var s1 = [2,6,7,10];
  var s2 = [7,5,3,4];
  var s3 = [14,9,8];
  plot3 = $.jqplot('chart3',[s1,s2,s3],{
    // Tell the plot to stack the bars.
    stackSeries: true,captureRightClick: true,seriesDefaults:{
      renderer:$.jqplot.BarRenderer,rendererOptions: {
          // Put a 30 pixel margin between bars.
          barMargin: 30,// Highlight bars when mouse button pressed.
          // Disables default highlighting on mouse over.
          highlightMouseDown: true   
      },pointLabels: {show: true}
    },axes: {
      xaxis: {
          renderer: $.jqplot.CategoryAxisRenderer
      },yaxis: {
        // Don't pad out the bottom of the data range.  By default,// axes scaled as if data extended 10% above and below the
        // actual range to prevent data points right on grid boundaries.
        // Don't want to do that here.
        padMin: 0
      }
    },legend: {
      show: true,location: 'e',placement: 'outside'
    }      
  });
  // Bind a listener to the "jqplotDataClick" event.  Here,simply change
  // the text of the info3 element to show what series and ponit were
  // clicked along with the data for that point.
  $('#chart3').bind('jqplotDataClick',function (ev,seriesIndex,pointIndex,data) {
      $('#info3').html('series: '+seriesIndex+',point: '+pointIndex+',data: '+data);
    }
  ); 
});

相关文章

jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进...
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。 入门 编写一个jQuery插件开始于给...
最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js。 兼容性如图: ht...
一、什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异...
AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一...