Question

我正在尝试实现JQPLOT条形图，但它只显示了几个条形图（两个条形图反对标记'e'，组合值为'2 null 2'）。以下是我的代码。你能不能在这里建议什么是错的。我添加了alert语句来显示数组中的值，结果被提到注释：

<%@ page language="java" contentType="text/html; charset=utf-8"%>
<!DOCTYPE html>
<html>
<head>
<!--[if lt IE 9]><script type="text/javascript" src="js/excanvas.min.js"></script><![endif]-->
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.jqplot.min.css" />
<script type="text/javascript" src="js/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="js/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="js/jqplot.pointLabels.min.js"></script> 
<script type="text/javascript" src="js/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="js/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="js/jqplot.json2.min.js"></script>

 <script type="text/javascript">  
 $(document).ready(function(){

     var DelayFeed = [[]];
     var DelayConfirmation = [[]];
     var CorruptFeed = [[]];
     var FeedName = [[]];

     var feedData = $.ajax({           
            url: "FeedServlet",           
            dataType : 'json',
            async: false
            }).responseText;

     var arrayData = JSON.parse(feedData);

     for (var i = 0; i < arrayData.length; i++) {   

         DelayFeed[0].push([ arrayData[i].DelayFeed ]);
         DelayConfirmation[0].push([ arrayData[i].DelayConfirmation ]);
         CorruptFeed[0].push([ arrayData[i].CorruptFeed ]);
         FeedName[0].push([ arrayData[i].FeedName ]);

        }

     alert(DelayFeed[0]); //8,7,4,3,3
     alert(DelayConfirmation[0]); //4,4,4,2,2
     alert(CorruptFeed[0]); //4,4,4,2,2

     $.jqplot('chart_div', [ DelayConfirmation, DelayFeed, CorruptFeed ]  
     , { seriesDefaults:{
        renderer:$.jqplot.BarRenderer,
        rendererOptions: {
            barDirection: 'vertical'
},
        pointLabels: { show:true }
  },
         series:[
      {label:'Delay - Confirmation'},
      {label:'Delay - Feed'},
      {label:'Corrupt Feed'}
  ],
         legend: {
      show: true,
      placement: 'outsideGrid'
  },
  axes: {
                 xaxis: {
          renderer: $.jqplot.CategoryAxisRenderer,
          ticks: ['a', 'b', 'c', 'd', 'e'];
      },

  }
});

        });
</script> 
</head>
<body>
            <div class="work-area">
            <div id="chart_div" style="width: 800px; height: 400px;"></div>
            </div>
        </body>
</html>

Answer 1

初看起来，$ .jqplot（）函数中传递的数据格式似乎存在问题。实际上，如果用这些替换三个数据参数：

var DelayFeed = [8,7,4,3,3];
var DelayConfirmation = [4,4,4,2,2];
var CorruptFeed = [4,4,4,2,2]; 

$.jqplot('chart_div', [ DelayConfirmation, DelayFeed, CorruptFeed ]

您获得以下（并且正确）条形图 enter image description here

您需要使用三个简单数组（“[]”）而不是嵌入数组（“[[]]”）。因此，我会尝试使用

$.jqplot('chart_div', [ DelayConfirmation[0], DelayFeed[0], CorruptFeed[0] ]

JQPlot - 仅显示部分条形图

1 个答案: