javascript - Show values on each arc doughnut Chart.js - Stack Overflow

admin管理员组

文章数量:1332389

I'm doing one graphic with chart.js and i can put the graph working but i wanted to show the values on each arc of the graph and i can´t. I saw everything that i looked on the internet and nothing helped me.

Instead of having the tooltips i wanted to have the data on each arc. Is that possible?

My code:

var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
var car = {
labels: ["January", "February", "March", "April", "May"],
datasets: [{
    data: [
      randomScalingFactor(),
      randomScalingFactor(),
      randomScalingFactor(),
      randomScalingFactor(),
      randomScalingFactor(),
    ],
    backgroundColor: [
        window.chartColors.red,
        window.chartColors.orange,
        window.chartColors.yellow,
        window.chartColors.green,
        color(window.chartColors.black).alpha(0.4).rgbString()
    ],borderColor: [
      'white',
      'white',
      'white',
      'white',
      'white'
    ],
    borderWidth: 5,

}],

  };


window.onload = function() {
var ctx = document.getElementById("chart-area").getContext("2d");
window.myDoughnut = new Chart(ctx, {
  type: 'doughnut',
  data: car,
  showDatapoints: true,
  options: {
    scaleShowLabels: true,
      responsive: true,
      legend: {
          position: 'bottom',
      },
      title: {
          display: true,
          text: 'Idades',
          fontSize:20
      },
      animation: {
          animateScale: true,
          animateRotate: true
      }
  }
});

};

this is what i have: .jpg

this is what i pretend: .jpg

Can someone help me?

I'm doing one graphic with chart.js and i can put the graph working but i wanted to show the values on each arc of the graph and i can´t. I saw everything that i looked on the internet and nothing helped me.

Instead of having the tooltips i wanted to have the data on each arc. Is that possible?

My code:

var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
var car = {
labels: ["January", "February", "March", "April", "May"],
datasets: [{
    data: [
      randomScalingFactor(),
      randomScalingFactor(),
      randomScalingFactor(),
      randomScalingFactor(),
      randomScalingFactor(),
    ],
    backgroundColor: [
        window.chartColors.red,
        window.chartColors.orange,
        window.chartColors.yellow,
        window.chartColors.green,
        color(window.chartColors.black).alpha(0.4).rgbString()
    ],borderColor: [
      'white',
      'white',
      'white',
      'white',
      'white'
    ],
    borderWidth: 5,

}],

  };


window.onload = function() {
var ctx = document.getElementById("chart-area").getContext("2d");
window.myDoughnut = new Chart(ctx, {
  type: 'doughnut',
  data: car,
  showDatapoints: true,
  options: {
    scaleShowLabels: true,
      responsive: true,
      legend: {
          position: 'bottom',
      },
      title: {
          display: true,
          text: 'Idades',
          fontSize:20
      },
      animation: {
          animateScale: true,
          animateRotate: true
      }
  }
});

};

this is what i have: https://i.sstatic/7avqG.jpg

this is what i pretend: https://i.sstatic/zNDHL.jpg

Can someone help me?

• javascript
• chart.js

Share Improve this question Follow asked Apr 25, 2017 at 16:48 Bruno GonçalvesBruno Gonçalves 5522 gold badges22 silver badges1111 bronze badges 1

• cdn.jsdelivr/gh/emn178/chartjs-plugin-labels/src/… instead use this link, the above link for PieceLabel.min.js is not working now – Muttineni sai Rohith Commented May 10, 2021 at 2:14

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Yes! That's absolutely possible.

Though you could create your own plugin but, I would suggest using a ChartJS plugin called Chart.PieceLabel.js , which makes it much more easier to acplish.

usage ^{add the following in your chart options}

pieceLabel: {
    mode: 'value'
}

---

var randomScalingFactor = function() {
    return Math.round(Math.random() * 100);
};
var ctx = document.getElementById("chart-area").getContext("2d");
var myDoughnut = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ["January", "February", "March", "April", "May"],
        datasets: [{
            data: [
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
            ],
            backgroundColor: ['#ff3d67', '#ff9f40', '#ffcd56', '#4bc0c0', '#999999'],
            borderColor: 'white',
            borderWidth: 5,
        }]
    },
    showDatapoints: true,
    options: {
        tooltips: {
            enabled: false
        },
        pieceLabel: {
            mode: 'value'
        },
        responsive: true,
        legend: {
            position: 'bottom',
        },
        title: {
            display: true,
            text: 'Idades',
            fontSize: 20
        },
        animation: {
            animateScale: true,
            animateRotate: true
        }
    }
});

<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="https://cdn.rawgit./emn178/Chart.PieceLabel.js/master/build/Chart.PieceLabel.min.js"></script>
<canvas id="chart-area"></canvas>

本文标签： javascriptShow values on each arc doughnut ChartjsStack Overflow