将值放入圆环图

时间:2016-10-04 17:10:28

标签: javascript chart.js

我需要在图表中输入第一个百分比的值,如图像Example

在这种情况下,将pedro(33%)的值放在图表中。 我是chartJS的初学者,完全不知道。有可能吗?



var randomScalingFactor = function() {
  return Math.round(Math.random() * 100);
};

var config = {
  type: 'doughnut',
  data: {
    datasets: [{
      data: [
        33,
        67,
      ],
      backgroundColor: [
        "#F7464A",
        "#46BFBD",
      ],
      label: 'Expenditures'
    }],
    labels: [
      "Pedro: 33 ",
      "Henrique: 67 ",
    ]
  },
  options: {
    responsive: true,
    legend: {
      position: 'bottom',
    },
    title: {
      display: true,
      text: 'Pedro Henrique Kuzminskas Miyazaki de Souza'
    },
    animation: {
      animateScale: true,
      animateRotate: true
    },
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          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("myChart").getContext("2d");
window.myDoughnut = new Chart(ctx, config); {

}

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

1 个答案:

答案 0 :(得分:1)

这不是默认行为的一部分。您需要修改chart.js脚本。

How to add text inside the doughnut chart using Chart.js?