[英]Chart with tool tip values
我真的很困惑如何在angular js中創建圖表。 使用angular-chart.js,我可以創建一個餅圖和條形圖。 但無法添加工具提示。 我正好在尋找的東西像這樣的顯示比例為工具提示。
javascript
$scope.labels = ["Test1", "Test2", "Test3", "Test4"];
$scope.data = [8000, 6000, 22000, 500];
$scope.color = ['#90EE90', '#FF6600', '#8080FF'];
$scope.options = {
legend: {
display: true
},
responsive: true, // set to false to remove responsiveness. Default responsive value is true.
tooltipEvents: [],
showTooltips: true,
tooltipCaretSize: 0,
onAnimationComplete: function() {
this.showTooltip(this.segments, true);
}
}
html
<canvas id="doughnut" class="chart chart-doughnut" chart-data="data" chart-labels="labels" chart-colors="color" chart-options="options">
</canvas>
我能夠創建圖表。 但是,如何僅使用值設置工具提示或將值轉換為百分比? 我嘗試了另一個也不起作用的示例 。 我嘗試在angular 1.4版本中使用該代碼 ,但給出錯誤,表明未定義值。 誰能幫助我創建工具提示上帶有百分比值的圖表?
您可以使用jtblin / angular-chart.js,因為示例中的庫未顯示百分比。
還添加了工具提示回調
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 + "%";
}
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.