chartjs在饼图上显示值 [英] chartjs show value on pie chart

问题描述

我正在使用chartjs，并试图将数据对象中数据数组的值添加到图表中。我的意思是，如果数据数组看起来像[1,4,5]那么在相关部分的饼图上会显示该值。所以在这种情况下，最大的'馅饼'应该有数字6.目前它只显示你将鼠标悬停在馅饼上时的数字。

I am using chartjs and am trying to add the value of the the data array in the data object to the chart. I mean that if the data array looks like this [1,4,5] that on the pie chart over the relevant section would show the value. so in this case the biggest 'slice of the pie' should have the number 6. Currently it only shows the number when you hover over the pie.

我希望这会使感。请参阅下面的代码。

I hope this makes sense. Please see code below.

var ctx = document.getElementById("myChart");

var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['a', 'b', 'c'],
        datasets: [{
            label: '# of Followers',
            data: [1,4,6],
            backgroundColor: [
                'rgba(255, 99, 132, 0.9)',
                'rgba(54, 162, 235, 0.9)',
                'rgba(255, 206, 86, 0.9)',
                'rgba(75, 192, 192, 0.9)',
                'rgba(153, 102, 255, 0.9)',
                'rgba(255, 159, 64, 0.9)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 5
        }]
    },
    options: {
    	responsive: false
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

推荐答案

使用此：

$scope.options = {
		        tooltipEvents: [],
		        showTooltips: true,
		        tooltipCaretSize: 0,
		        onAnimationComplete: function () {
		            this.showTooltip(this.segments, true);
		        },
		    }

然后将其正确引用到HTML元素..！ !!

Then refer it properly to HTML element..!!!

这篇关于chartjs在饼图上显示值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！