jquery – jqplot并排堆积条形图

前端之家收集整理的这篇文章主要介绍了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相关文章