Chart.js 2.0 çörek aracı yüzdeleri

chart.js 1.0 ile çalıştım ve veri kümesine bölünmüş veriye göre yüzdelerini görüntüleyen donut grafik araç ipuçlarını aldım, ancak bunu grafik 2.0 ile kopyalayamıyorum.Chart.js 2.0 çörek aracı yüzdeleri

Yüksek ve düşük arama yaptım ve bir çalışma çözümü bulamadım. Bunun seçenekler altında olacağını biliyorum ama denediğim her şey pastayı en iyi şekilde işlevsiz kıldı.

<html> 

<head> 
    <title>Doughnut Chart</title> 
    <script src="../dist/Chart.bundle.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <style> 
    canvas { 
     -moz-user-select: none; 
     -webkit-user-select: none; 
     -ms-user-select: none; 
    } 
    </style> 
</head> 

<body> 
    <div id="canvas-holder" style="width:75%"> 
     <canvas id="chart-area" /> 
    </div> 
    <script> 
    var randomScalingFactor = function() { 
     return Math.round(Math.random() * 100); 
    }; 
    var randomColorFactor = function() { 
     return Math.round(Math.random() * 255); 
    }; 
    var randomColor = function(opacity) { 
     return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')'; 
    }; 

    var config = { 
     type: 'doughnut', 
     data: { 
      datasets: [{ 
       data: [ 
        486.5, 
        501.5, 
        139.3, 
        162, 
        263.7, 
       ], 
       backgroundColor: [ 
        "#F7464A", 
        "#46BFBD", 
        "#FDB45C", 
        "#949FB1", 
        "#4D5360", 
       ], 
       label: 'Expenditures' 
      }], 
      labels: [ 
       "Hospitals: $486.5 billion", 
       "Physicians & Professional Services: $501.5 billion", 
       "Long Term Care: $139.3 billion", 
       "Prescription Drugs: $162 billion", 
       "Other Expenditures: $263.7 billion" 
      ] 
     }, 
     options: { 
      responsive: true, 
      legend: { 
       position: 'bottom', 
      }, 
      title: { 
       display: false, 
       text: 'Chart.js Doughnut Chart' 
      }, 
      animation: { 
       animateScale: true, 
       animateRotate: true 
      } 

     } 
    }; 

    window.onload = function() { 
     var ctx = document.getElementById("chart-area").getContext("2d"); 
     window.myDoughnut = new Chart(ctx, config);{ 

     } 
    }; 


    </script> 
</body> 

</html>

kaynak

2016-05-16 wrennjb

options size istediğiniz sonucu elde etmek için, (diğer chartjs docs okunabilir) bir tooltips nesne

tooltips bir alan içinde geçebilir, bir label alanıyla bir callbacks nesnedir. label, üzerinde gezindiğiniz araç ipucu öğelerini ve grafiğinizi oluşturan verileri alan bir işlev olacaktır. Bu işlevden, araç ipucuna gitmek istediğiniz dizgiyi döndürmeniz yeterlidir. İşte

tooltips: { 
    callbacks: { 
    label: function(tooltipItem, data) { 
     //get the concerned dataset 
     var dataset = data.datasets[tooltipItem.datasetIndex]; 
     //calculate the total of this data set 
     var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) { 
     return previousValue + currentValue; 
     }); 
     //get the current items value 
     var currentValue = dataset.data[tooltipItem.index]; 
     //calculate the precentage based on the total and current item, also this does a rough rounding to give a whole number 
     var precentage = Math.floor(((currentValue/total) * 100)+0.5); 

     return precentage + "%"; 
    } 
    } 
}

fiddle

var randomScalingFactor = function() { 
 
    return Math.round(Math.random() * 100); 
 
}; 
 
var randomColorFactor = function() { 
 
    return Math.round(Math.random() * 255); 
 
}; 
 
var randomColor = function(opacity) { 
 
    return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')'; 
 
}; 
 

 
var config = { 
 
    type: 'doughnut', 
 
    data: { 
 
    datasets: [{ 
 
     data: [ 
 
     486.5, 
 
     501.5, 
 
     139.3, 
 
     162, 
 
     263.7, 
 
     ], 
 
     backgroundColor: [ 
 
     "#F7464A", 
 
     "#46BFBD", 
 
     "#FDB45C", 
 
     "#949FB1", 
 
     "#4D5360", 
 
     ], 
 
     label: 'Expenditures' 
 
    }], 
 
    labels: [ 
 
     "Hospitals: $486.5 billion", 
 
     "Physicians & Professional Services: $501.5 billion", 
 
     "Long Term Care: $139.3 billion", 
 
     "Prescription Drugs: $162 billion", 
 
     "Other Expenditures: $263.7 billion" 
 
    ] 
 
    }, 
 
    options: { 
 
    responsive: true, 
 
    legend: { 
 
     position: 'bottom', 
 
    }, 
 
    title: { 
 
     display: false, 
 
     text: 'Chart.js Doughnut Chart' 
 
    }, 
 
    animation: { 
 
     animateScale: true, 
 
     animateRotate: true 
 
    }, 
 
    tooltips: { 
 
     callbacks: { 
 
     label: function(tooltipItem, data) { 
 
     \t var dataset = data.datasets[tooltipItem.datasetIndex]; 
 
      var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) { 
 
      return previousValue + currentValue; 
 
      }); 
 
      var currentValue = dataset.data[tooltipItem.index]; 
 
      var precentage = Math.floor(((currentValue/total) * 100)+0.5);   
 
      return precentage + "%"; 
 
     } 
 
     } 
 
    } 
 
    } 
 
}; 
 

 

 
var ctx = document.getElementById("chart-area").getContext("2d"); 
 
window.myDoughnut = new Chart(ctx, config); { 
 

 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="canvas-holder" style="width:75%"> 
 
    <canvas id="chart-area" /> 
 
</div>

kaynak

2016-05-16 18:22:41 Quince

gösterdiğimiz Can sağlanan verilerle tam bir örnek nasıl bir görünüm alması bir örnektir t dinamik olarak yüzde o efsane metni? –

Eğer her cevap bu gibi olsaydı ... İyi iş dostum –

Bu, etiketleri gizlediğinizde/çizdiğinizde işe yaramıyor. Çizilmemiş etiketlere göre% hesaplayabilmenin bir yolu var mı? –

Chart.js 2.0 çörek aracı yüzdeleri

cevap

İlgili konular