在morris圖表欄上顯示計數？

我想顯示一些數據分析使用morries圖表欄和我的酒吧顯示完美根據我的數據，但我面臨一個問題，計數應顯示在每個圖表欄中。在morris圖表欄上顯示計數？

我有以下腳本來顯示圖表：

<?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>

所以按照上面的截圖它工作正常，但現在我想告訴成員在每個計算每個酒吧，現在的成員計數顯示懸停。

那麼，我如何顯示每個欄上的成員數。

來源

2017-03-22 Santosh Khatri

看看這個鏈接[stack]（http://stackoverflow.com/questions/23537788/how-to-place-a-text-on-morris-js-bar-graph） – webpic

@webpic，nothing我在這個鏈接中找到。 –

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')) 
 
}

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

莫里斯使用事件代表團展現hover.As因此你最好複製$('morris-hover morris-default-style')一些times.Or追加了如下每個矩形欄文本。

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

來源

2017-03-22 10:59:20

你能解釋一下我應該在哪裏放這個腳本。 –

我剛剛把這個腳本。但它沒有提供任何東西。 –

我應該在哪裏粘貼你的代碼，在PHP或腳本？我已經粘貼到腳本，它不讀[我]。 –

在morris圖表欄上顯示計數？

回答

相關問題