Question

我想使用morries图表条显示一些数据分析，我的条形图完全根据我的数据显示，但我面临一个问题，应该在每个图表栏中显示计数。

我有以下脚本来显示图表：

<?php 
    $first_month_query  = mysqli_query($con, "SELECT COUNT(`ft_booking_date`) as day_count, DATE_FORMAT(`ft_booking_date`, '%d-%b') as Booking_date FROM `jps_final_tickets` WHERE `ft_event`= '$getEventId' AND `ft_booking_date` >= DATE_FORMAT(curdate(), '%Y-%m-01') GROUP BY DATE_FORMAT(`ft_booking_date`, '%d-%b')") or die(mysqli_error($con));
    $json_data_current_day = array();
    foreach( $first_month_query as $result){
        $json_array_first_day['y']= $result['Booking_date'];  
        $json_array_first_day['a']=$result['day_count'];
        array_push($json_data_current_day, $json_array_first_day);
    }
    ?>
    <div class="col-md-12">
        <div class="form-group" id="day-wise"></div>
    </div>



<script>
Morris.Bar({
    element: 'day-wise',
    data: <?php echo json_encode($json_data_current_day); ?>,
    xkey: 'y',
    ykeys: ['a'],
    labels: ['Members Count']
});
</script>

因此，按照上面的截图，它工作正常，但现在我想在每个条形图上显示成员数，现在显示悬停时的成员数。

那么，我怎样才能在每个栏上显示会员数。

Answer 1

＆＃13;

Morris.Bar({
  element: 'bar-example',
  data: [{
    device: 'iPhone',
    geekbench: 136
  }, {
    device: 'iPhone 3G',
    geekbench: 137
  }, {
    device: 'iPhone 3GS',
    geekbench: 275
  }, {
    device: 'iPhone 4',
    geekbench: 380
  }, {
    device: 'iPhone 4S',
    geekbench: 655
  }, {
    device: 'iPhone 5',
    geekbench: 1571
  }],
  xkey: 'device',
  ykeys: ['geekbench'],
  labels: ['Geekbench'],
  barRatio: 100,
  xLabelAngle: 35,
  hideHover: 'always'
});

var data = [{
  device: 'iPhone',
  geekbench: 136
}, {
  device: 'iPhone 3G',
  geekbench: 137
}, {
  device: 'iPhone 3GS',
  geekbench: 275
}, {
  device: 'iPhone 4',
  geekbench: 380
}, {
  device: 'iPhone 4S',
  geekbench: 655
}, {
  device: 'iPhone 5',
  geekbench: 1571
}];

for (var i = 0; i < data.length; i++) {
  var a = $('svg text:nth(' + (i+data.length-1) + ')').clone();
  
   var b = a.children('tspan')[0];
  b.textContent=data[data.length-i-1].geekbench;
  b.setAttribute('dy', 24);
  $(a).appendTo($('svg'))
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>

<body>
  <div id="bar-example"></div>
</body>

＆＃13;

Moris使用事件委派来显示悬停。因此，您最好将$('morris-hover morris-default-style')复制一段时间。或者为每个矩形栏附加文本，如下所示。

let data=<?php echo json_encode($json_data_current_day)[i]; ?>;

for(let i=0;i<data.length;i++){
    $('#day-wise svg > rect:nth-child('+i+')').append('<text>'+data[i]+'</text>')
}

我已经做了一个例子。http://codepen.io/fanyer/pen/aJYMMa

在莫里斯图表栏上显示计数？

1 个答案: