Zeigen Sie die Anzahl auf der Morris-Chart-Leiste an?

Ich möchte einige Datenanalyse mit Morries Diagrammleiste zeigen und meine Leiste zeigt perfekt nach meinen Daten, aber ich bin mit einem Problem konfrontiert, dass die Anzahl in jeder Diagrammleiste angezeigt werden sollte.Zeigen Sie die Anzahl auf der Morris-Chart-Leiste an?

Ich habe folgendes Skript-Chart zeigen:

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

So laut obigen Screenshot es funktioniert gut, aber jetzt will ich Mitglied auf jedem jeden Takt zählen zeigen, gerade jetzt das Mitglied Zählung beim Schweben.

Also, wie kann ich Mitglied zählt auf jeder Bar zeigen.

Quelle

2017-03-22 Santosh Khatri

siehe diesen Link [stack] (http://stackoverflow.com/questions/23537788/how-to-place-a-text-on-morris-js-bar-graph) – webpic

@webpic, nichts Ich habe in diesem Link gefunden. –

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>

Moris Ereignis Delegation verwenden die hover.As ein Ergebnis zu zeigen, besser als unter $('morris-hover morris-default-style') für einige times.Or anhängen Text für jeden rect bar kopieren würde.

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

Ich habe ein Beispiel gemacht. http://codepen.io/fanyer/pen/aJYMMa

Quelle

2017-03-22 10:59:20

Können Sie mir erklären, wo ich dieses Skript platzieren soll? –

Ich habe das gerade in ein Skript geschrieben. aber es gibt nichts. –

Wo sollte ich Ihren Code einfügen, in PHP oder im Skript? Ich habe in Skript eingefügt, das es nicht liest [ich]. –

Zeigen Sie die Anzahl auf der Morris-Chart-Leiste an?

Antwort

Verwandte Themen