2017-03-09 1 views
0

angezeigt werden möchte ich fragen, ist es möglich, Datenwerte auf einem halben Donuts-Diagramm anzuzeigen? Möchten Sie den Datenwert als Text am unteren Rand des Diagramms zeigen, indem ihr Wert aus dem Array unter hier ist der Link: https://jsfiddle.net/z638ttv0/16/wie Datenwerte in halben Donuts auf Chart.js

Vielen Dank für die Hilfe im Voraus

var ctx = document.getElementById("myChart"); 
var myChart = new Chart(ctx, { 
    type: 'doughnut', 
    data: { 
     labels: ["Red"], 
     datasets: [{ 
      label: '# of Votes', 
      data: [50,100-50], 
      backgroundColor: [ 

       'rgba(255, 159, 64, 0.2)' 
      ], 
      borderColor: [ 

       'rgba(255, 159, 64, 1)' 
      ], 
      borderWidth: 1 
     }] 
    }, 
    options: { 
     rotation: 1 * Math.PI, 
     circumference: 1 * Math.PI 
    } 
}); 

Antwort

1

var ctx = document.getElementById("myChart"); 
 
var myChart = new Chart(ctx, { 
 
    type: 'doughnut', 
 
    data: { 
 
     labels: ["Red"], 
 
     datasets: [{ 
 
      label: '# of Votes', 
 
      data: [50,100-50], 
 
      text: "ff", 
 
      backgroundColor: [ 
 
       
 
       'rgba(255, 159, 64, 0.2)' 
 
      ], 
 
      borderColor: [ 
 
       
 
       'rgba(255, 159, 64, 1)' 
 
      ], 
 
      borderWidth: 1 
 
     }] 
 
    }, 
 
    options: { 
 
     rotation: 1 * Math.PI, 
 
     circumference: 1 * Math.PI 
 
    } 
 
});
.test 
 
{ 
 
    position:absolute; 
 
    bottom:-20px; 
 
    left:calc(50% - 10px); 
 
    display:block; 
 
}
<body> 
 
<span class="test">test</span> 
 
    <canvas id="myChart" width="400" height="400"></canvas> 
 
    
 

 
    
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script> 
 

 
</body>

Angepasster Wert

+0

Danke für die Antwort, aber ich möchte "Daten: [50]" statt angezeigt werden styling es durch CSS – Harshit

Verwandte Themen