2013-04-17 3 views
0

JQPlot 스택 막대를 올바르게 표시하는 데 문제가 있습니다.JQPlot이 누적 막대를 가로로 표시합니다.

내 코드 : 나는 이미지를 게시 할 수 없습니다하지만 난 충분히 명성을하지 않아도

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Vertical Graph</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script type="text/javascript" src="script/jquery.jqplot.min.js"></script> 
    <script type="text/javascript" src="script/jqplot.barRenderer.min.js"></script> 
    <script type="text/javascript" src="script/jqplot.categoryAxisRenderer.min.js"></script> 
    <script type="text/javascript" src="script/jqplot.pointLabels.min.js"></script> 
    <link rel="Stylesheet" type="text/css" href="css/jquery.jqplot.min.css" /> 
</head> 
<body> 
    <div id="test" style="width:auto; height:auto;"></div> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      var s1 = [1, 6, 7, 10]; 
      var s2 = [3, 5, 3, 4]; 
      var s3 = [14, 9, 3, 8]; 
      plot3 = $.jqplot('test', [s1, s2, s3], { 
       // Tell the plot to stack the bars. 
       stackSeries: true, 
       captureRightClick: true, 
       seriesDefaults: { 
        renderer: $.jqplot.BarRenderer, 
        rendererOptions: { 
         barDirection: 'horizontal', 
         // 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: 'nw', 
        placement: 'inside' 
       } 
      }); 
      // 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); 
       } 
      ); 
      $(window).resize(function() { 
       plot3.replot({ resetAxes: true }); 
      }); 
     }); 
    </script> 
</body> 
</html> 

죄송있다.

답변

0

고맙습니다.하지만 다른 방법으로 해결했습니다. 이에

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 
       } 
      }, 

변경이 : 여기

내 코드를 인도 표준시

axes: { 
       yaxis: { 
        renderer: $.jqplot.CategoryAxisRenderer 
        } 
      }, 

그렇게 작동)

관련 문제