jqplot横並びの棒グラフ

Question

jqplotを使って横並びの棒グラフを実現することはできますか？例えば、X軸は与えられた月となり、毎月いくつかの積み重なった棒があります。このような

何か：

注：私は普通の積み上げグラフ、異なる何かを求めています。私が何をしようとしているのかをよりよく理解するために、絵を見てください。

Answer 1

はい、できます。

$(document).ready(function(){ 
    var s1 = [2, 6, 7, 10]; 
    var s2 = [7, 5, 3, 4]; 
    var s3 = [14, 9, 3, 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); 
    } 
); 
}); 

Answer 2

誰がjqplotため、この機能を作成していない：jqplot

ソースコードから参照して

。 This guyは彼が行くと言いました。 Flotのような別のライブラリを使用し、jqplotのプラグインを自分で作成するか、他の人がそれを行うように説得してください！ Flotを使用している場合、この機能を有効にするパッチがあるようですが、hereはマージされていません。

Answer 3

同じプロットベースに2つのグラフをプロットする必要があります。それが唯一のプロットの上で動作しますので、トンthis-

$(document).ready(function(){ 
    /* graph config */ 
    var maxVal = 13; 

    /* graph vals */ 
    var Bar1 = [5, 0, 10, 0, 12, 0]; 
    var Bar2 = [0, 17, 0, 20, 0, 12 ]; 
    var BaseVals=[0,0,0,0,0,0]; 
    /* graph ticks */ 
    var baseTicks=['Americas','','Europe','','Asia',''] 
    var EmptyTicks=['','','','','',''] 


    /* plot the base graph */ 
    plotbase = $.jqplot('chart3', [BaseVals], { 
     seriesDefaults:{ 
      renderer:$.jqplot.BarRenderer, 
      rendererOptions: {barMargin: 10}, 
      pointLabels: {show: false} 
     }, 
     axesDefaults: {show: false}, 
     tickOptions: {showMark: false, angle: 90}, 
     axes: { 
      showLabel: false, 
      xaxis: { 
       renderer: $.jqplot.CategoryAxisRenderer, 
       ticks: baseTicks, 
       tickOptions: {markSize: 0} 
      }, 
      yaxis: { 
       padMin: 0, 
       min: 0, 
       max: maxVal, 
       showLabel: false, 
       show: false 
      } 
     } 
    }); 





    plot2 = $.jqplot('chart3', [Bar1], { 
     seriesColors: ["#67ce64", "#da9831","#67ce64", "#da9831"],\\this can be changed 
     stackSeries: true, 
     captureRightClick: true, 
     seriesDefaults:{ 
      renderer:$.jqplot.BarRenderer, 
      rendererOptions: {barMargin: 10, highlightMouseOver: true}, 
      pointLabels: {show: false} 
     }, 
     axesDefaults: {show: false}, 
     tickOptions: {showMark: false}, 
     axes: { 
      showLabel: false, 
      xaxis: { 
       renderer: $.jqplot.CategoryAxisRenderer, 
       ticks: EmptyTicks 
      }, 
      yaxis: { 
       padMin: 0, 
       min: 0, 
       max: maxVal, 
       showLabel: false, 
       show: false 
      } 
     }, 
     grid: {background: 'transparent', drawGridLines: false, gridLineColor: 'transparent', borderColor: 'transparent'} 
    }); 


    plot1 = $.jqplot('chart3', [Bar2], { 
     stackSeries: true, 
     captureRightClick: true, 
     seriesColors: ["#effa38", "#37d1f8", "#5129b6","#5129b6"],//this can be changed 
     seriesDefaults:{ 
      renderer:$.jqplot.BarRenderer, 
      rendererOptions: {barMargin: 10, highlightMouseOver: true }, 
      pointLabels: {show: false} 
     }, 
     axes: { 
      xaxis: { 
       renderer: $.jqplot.CategoryAxisRenderer, 
       tickRenderer:$.jqplot.CanvasAxisTickRenderer, 
       ticks: EmptyTicks, 
       tickOptions: { 
        angle: -90, 
       } 
      }, 
      yaxis: { 
       padMin: 0, 
       min: 0, 
       max: maxVal 
      } 
     }, grid: {background: 'transparent', drawGridLines: false, gridLineColor: 'transparent', borderColor: 'transparent'} 
    }); 

}); 

を試してみてくださいしかし、あなたは唯一のプロット

の上でツールチップ/蛍光ペンを適用することができるようになります、この点に注意してください任意のツールチップか何かをしたいです