jqplot 막대 차트에 여러 막대를 배치하는 방법

막대 그래프는 jqplot을 사용하여 완성되었습니다. 이제 x 축의 각 점에 3 개의 막대가 나타납니다. 그것을 어떻게 할 수 있습니까? 이 이미지 위에 http://peltiertech.com/Utility/pix/clusterstackchart.png jqplot 막대 차트에 여러 막대를 배치하는 방법

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org /TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Insert title here</title> 
</head> 
<body> 

<div id="chat3" style="height:400px;width:300px; "></div> 
<script type="text/javascript" src="plugins/jquery.js"></script> 
<script type="text/javascript" src="plugins/jquery.jqplot.min.js"></script> 
<script type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script> 
<script type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.min.js"></script> 
<script type="text/javascript" src="plugins/jqplot.pointLabels.min.js"></script> 


<script type="text/javascript"> 

$(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: { 
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); 
} 
); 
}); 


</script> 


</body> 
</html>

출처

2013-06-12 user2470723

나는 그 solution.but 몇 시간 후에 제공 할 수 있습니다 –

괜찮아요하지만 최대한 빨리 위 코드를 사용하면 x 축의 한 지점에서 하나의 막대를 제공합니다 .. x 축의 한 지점에 3 개의 막대가 필요합니다 ... 확인 내 이미지 링크 형. – user2470723

중복 된 http://stackoverflow.com/questions/9270945/jqplot-side-by-side-stacked-bar-chart – foobarbecue

    var s1 = [ 1, 2, 2, 3 ]; 
        var s2 = [ 12, 32, 3, 12 ]; 
        var s3 = [ 12, 32, 54, 64 ]; 
        var ticks = [ 'Section1', 'section2', 'section3', 
          'section4' ]; 

        plot2 = $.jqplot('chart3', [ s1, s2, s3 ], { 
         animate : !$.jqplot.use_excanvas, 
         seriesDefaults : { 
          renderer : $.jqplot.BarRenderer, 
          pointLabels : { 
           show : true 
          }, 
          rendererOptions : { 
           barPadding : 8, // number of pixels between 
           // adjacent bars in the same 
           // group (same category or bin). 
           barMargin : 25, // number of pixels between 
           // adjacent groups of bars. 
           barDirection : 'vertical', // vertical or 
           // horizontal. 
           barWidth : 20, // width of the bars. null to 
          // calculate automatically. 

          } 
         }, 
         series : [ { 
          label : 'X axis 1' 
         }, { 
          label : 'X axis 2' 
         }, { 
          label : 'X axis 3' 
         }, ], 
         seriesColors : [ "#efa229", "#245779", "#4BB2C5" ], 
         axesDefaults : { 
          base : 10, // the logarithmic base. 
          tickDistribution : 'even', // 'even' or 'power'. 
         // 'even' will produce 
         // with even visiual 
         // (pixel) 
         // spacing on the axis. 'power' will produce ticks 
         // spaced by 
         // increasing powers of the log base. 
         }, 
         axesDefaults : { 
          tickRenderer : $.jqplot.CanvasAxisTickRenderer, 
          tickOptions : { 

           fontSize : '7pt' 
          } 
         }, 
         axes : { 
          xaxis : { 
           renderer : $.jqplot.CategoryAxisRenderer, 
           ticks : ticks 
          }, 
          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 
          } 
         }, 
         tickOptions : { 

          fontSize : '7pt' 
         }, 
         legend : { 
          show : true, 
          location : 'ne', // compass direction, nw, n, ne, 
          // e, se, s, sw, w. 
          xoffset : 12, // pixel offset of the legend box 
          // from the x (or x2) axis. 
          yoffset : 12, // pixel offset of the legend box 
          // from the y (or y2) axis. 
          placement : 'outside' 
         }, 
         cursor : { 
          show : false, 

          showTooltip : true, 
          tooltipLocation : 'ne', 

         }, 
         grid : { 
          background : 'white' 
         } 
        });

을 내가 3 줄을 표시하기위한 구현 한 코드가되어 있는지 확인하십시오 각 X point..hope 당신은 다음이 helpfull

이 helpfull JS와 CSS를 찾을 파일

jquery.jqplot.min.css"

jquery.jqplot.min.js 
jqplot.highlighter.min.js 
jqplot.barRenderer.min.js 
jqplot.categoryAxisRenderer.min.js 
jqplot.pointLabels.min.js"></script> 
jqplot.cursor.min.js 
jqplot.dateAxisRenderer.min.js 
jqplot.canvasTextRenderer.min.js 
jqplot.canvasAxisTickRenderer.min.js

출처

2013-06-12 08:54:21

기다려라. 내가 그것을 사용하고, 당신에게 알렸다. .. 어쨌든 .1 개의 희망 – user2470723

과 의심. 어떤 js 파일을 내 HTML 파일로 가져와야하나요? – user2470723

다른 방법을 원한다면 알려 주시기 바랍니다. 나는 단지 이미지를 오해하고 모든 x 포인트에 3 개의 개별 막대가있는 다른 차트 쿼리를 제공했습니다. –

jqplot 막대 차트에 여러 막대를 배치하는 방법

답변

관련 문제