Javascript 如何在chart.js中显示每个切片的饼图数据值

我正在使用Chart.js在php页面中绘制饼图。我发现工具提示显示了每个切片的值。

但我希望显示这些值，如下图所示

我不知道如何使用chart.js实现这一点

请帮帮我

我的Javascript代码：

function drawPie(canvasId,data,legend){
    var ctx = $("#pie-canvas-" + canvasId).get(0).getContext("2d");

    var piedata = [];
    $.each(data,function(i,val){
        piedata.push({value:val.count,color:val.color,label:val.status});
    });
    var options =
    {
        tooltipTemplate: "<%= Math.round(circumference / 6.283 * 100) %>%",
    }
    var pie = new Chart(ctx).Pie(piedata,options);
    if(legend)document.getElementById("legend").innerHTML = pie.generateLegend();
}

函数drawPie（画布ID、数据、图例）{
var ctx=$（“#饼图画布-”+canvasId）.get（0）.getContext（“2d”）；
var piedata=[]；
$。每个（数据、函数（i、val）{
push（{value:val.count，color:val.color，label:val.status}）；
});
var期权=
{
ToolTiptTemplate:“%”，
}
var pie=新图表（ctx）.pie（piedata，选项）；
if（图例）document.getElementById（“图例”）.innerHTML=pie.generateGend（）；
}

php代码：

printf('<table><tr>');
echo '<td style="text-align: right;"><canvas id="pie-canvas-'
    . $canvasId
    . '" width="256" height="256" ></canvas></td><td style="text-align: left;width:360px;height:auto" id="legend" class="chart-legend"></td></tr></table>';

     echo '<script type="text/javascript">drawPie('
    . $canvasId
    . ', '
    . $data3
    .', '
    . $legend
    . ');</script>';

printf（“”）；
回声'；
回音“drawPie（'
$canvasId
. ', '
$data3
.', '
.$legend
. ');';

---

据我所知，我不相信Chart.JS有任何功能可以帮助在饼图上绘制文本。但这并不意味着你不能用原生JavaScript自己完成。我将为您提供一个如何执行此操作的示例，下面是为饼图中的每个段绘制文本的代码：

function drawSegmentValues()
{
    for(var i=0; i<myPieChart.segments.length; i++) 
    {
        // Default properties for text (size is scaled)
        ctx.fillStyle="white";
        var textSize = canvas.width/10;
        ctx.font= textSize+"px Verdana";

        // Get needed variables
        var value = myPieChart.segments[i].value;
        var startAngle = myPieChart.segments[i].startAngle;
        var endAngle = myPieChart.segments[i].endAngle;
        var middleAngle = startAngle + ((endAngle - startAngle)/2);

        // Compute text location
        var posX = (radius/2) * Math.cos(middleAngle) + midX;
        var posY = (radius/2) * Math.sin(middleAngle) + midY;

        // Text offside to middle of text
        var w_offset = ctx.measureText(value).width/2;
        var h_offset = textSize/4;

        ctx.fillText(value, posX - w_offset, posY + h_offset);
    }
}

这里的

myPieChart.segments[i].value/totalValue

部分计算了该段在图表中所占的百分比。例如，如果当前段的值为

50

，而总值为

200

。然后段占用的百分比将为：

50/200=>0.25

。剩下的就是让它看起来漂亮

0.25*100=>25

，然后在末尾添加一个

%

。对于整数百分比，我四舍五入到最接近的整数，尽管可能会导致精度问题。如果我们需要更高的精度，您可以使用

.toFixed（n）

保存小数点。例如，我们可以在需要时保存一个小数位：

var value = myPieChart.segments[i].value/totalValue*100;
if(Math.round(value) !== value)
    value = (myPieChart.segments[i].value/totalValue*100).toFixed(1);
value = value + '%';

---

据我所知，我不相信Chart.JS有任何功能可以帮助在饼图上绘制文本。但这并不意味着你不能用原生JavaScript自己完成。我将为您提供一个如何执行此操作的示例，下面是为饼图中的每个段绘制文本的代码：

function drawSegmentValues()
{
    for(var i=0; i<myPieChart.segments.length; i++) 
    {
        // Default properties for text (size is scaled)
        ctx.fillStyle="white";
        var textSize = canvas.width/10;
        ctx.font= textSize+"px Verdana";

        // Get needed variables
        var value = myPieChart.segments[i].value;
        var startAngle = myPieChart.segments[i].startAngle;
        var endAngle = myPieChart.segments[i].endAngle;
        var middleAngle = startAngle + ((endAngle - startAngle)/2);

        // Compute text location
        var posX = (radius/2) * Math.cos(middleAngle) + midX;
        var posY = (radius/2) * Math.sin(middleAngle) + midY;

        // Text offside to middle of text
        var w_offset = ctx.measureText(value).width/2;
        var h_offset = textSize/4;

        ctx.fillText(value, posX - w_offset, posY + h_offset);
    }
}

这里的

myPieChart.segments[i].value/totalValue

部分计算了该段在图表中所占的百分比。例如，如果当前段的值为

50

，而总值为

200

。然后段占用的百分比将为：

50/200=>0.25

。剩下的就是让它看起来漂亮

0.25*100=>25

，然后在末尾添加一个

%

。对于整数百分比，我四舍五入到最接近的整数，尽管可能会导致精度问题。如果我们需要更高的精度，您可以使用

.toFixed（n）

保存小数点。例如，我们可以在需要时保存一个小数位：

var value = myPieChart.segments[i].value/totalValue*100;
if(Math.round(value) !== value)
    value = (myPieChart.segments[i].value/totalValue*100).toFixed(1);
value = value + '%';

---

对于Chart.js 2.0及以上版本，图表对象数据已更改。对于使用Chart.js 2.0+的用户，下面是使用HTML5 Canvas

fillText（）

方法在饼图切片内显示数据值的示例。代码也适用于甜甜圈图表，唯一的区别是创建图表时

type:'pie'

与

type:'doughnut'

的区别

脚本：

Javascript

var data = {
    datasets: [{
        data: [
            11,
            16,
            7,
            3,
            14
        ],
        backgroundColor: [
            "#FF6384",
            "#4BC0C0",
            "#FFCE56",
            "#E7E9ED",
            "#36A2EB"
        ],
        label: 'My dataset' // for legend
    }],
    labels: [
        "Red",
        "Green",
        "Yellow",
        "Grey",
        "Blue"
    ]
};

var pieOptions = {
  events: false,
  animation: {
    duration: 500,
    easing: "easeOutQuart",
    onComplete: function () {
      var ctx = this.chart.ctx;
      ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
      ctx.textAlign = 'center';
      ctx.textBaseline = 'bottom';

      this.data.datasets.forEach(function (dataset) {

        for (var i = 0; i < dataset.data.length; i++) {
          var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
              total = dataset._meta[Object.keys(dataset._meta)[0]].total,
              mid_radius = model.innerRadius + (model.outerRadius - model.innerRadius)/2,
              start_angle = model.startAngle,
              end_angle = model.endAngle,
              mid_angle = start_angle + (end_angle - start_angle)/2;

          var x = mid_radius * Math.cos(mid_angle);
          var y = mid_radius * Math.sin(mid_angle);

          ctx.fillStyle = '#fff';
          if (i == 3){ // Darker text color for lighter background
            ctx.fillStyle = '#444';
          }
          var percent = String(Math.round(dataset.data[i]/total*100)) + "%";      
          //Don't Display If Legend is hide or value is 0
          if(dataset.data[i] != 0 && dataset._meta[0].data[i].hidden != true) {
            ctx.fillText(dataset.data[i], model.x + x, model.y + y);
            // Display percent in another line, line break doesn't work for fillText
            ctx.fillText(percent, model.x + x, model.y + y + 15);
          }
        }
      });               
    }
  }
};

var pieChartCanvas = $("#pieChart");
var pieChart = new Chart(pieChartCanvas, {
  type: 'pie', // or doughnut
  data: data,
  options: pieOptions
});

var数据={
数据集：[{
数据：[
11,
16,
7.
3.
14
],
背景颜色：[
“#FF6384”，
“#4BC0C0C0”，
“#FFCE56”，
“#E7E9ED”，
“#36A2EB”
],
标签：“我的数据集”//用于图例
}],
标签：[
“红色”，
“绿色”，
“黄色”，
“灰色”，
“蓝色”
]
};
变量选项={
事件：错误，
动画：{
持续时间：500，
放松：“放松夸脱”，
onComplete:函数（）{
var ctx=this.chart.ctx；
ctx.font=Chart.helpers.fontString（Chart.defaults.global.defaultFontFamily，'normal'，Chart.defaults.global.defaultFontFamily）；
ctx.textAlign='中心'；
ctx.textb基线='底部'；
this.data.datasets.forEach（函数（数据集）{
对于（var i=0；i

HTML

---

对于Chart.js 2.0及以上版本，图表对象数据已更改。对于使用Chart.js 2.0+的用户，下面是使用HTML5 Canvas

fillText（）

方法在饼图切片内显示数据值的示例。该代码适用于甜甜圈

          var val = dataset.data[i];
          var percent = String(Math.round(val/total*100)) + "%";

          if(val != 0) {
            ctx.fillText(dataset.data[i], model.x + x, model.y + y);
            // Display percent in another line, line break doesn't work for fillText
            ctx.fillText(percent, model.x + x, model.y + y + 15);
          }

var data = {
    datasets: [{
        data: [
            11,
            16,
            7,
            3,
            14
        ],
        backgroundColor: [
            "#FF6384",
            "#4BC0C0",
            "#FFCE56",
            "#E7E9ED",
            "#36A2EB"
        ],
        label: 'My dataset' // for legend
    }],
    labels: [
        "Red",
        "Green",
        "Yellow",
        "Grey",
        "Blue"
    ]
};

var pieOptions = {
  events: false,
  animation: {
    duration: 500,
    easing: "easeOutQuart",
    onComplete: function () {
      var ctx = this.chart.ctx;
      ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
      ctx.textAlign = 'center';
      ctx.textBaseline = 'bottom';

      this.data.datasets.forEach(function (dataset) {

        for (var i = 0; i < dataset.data.length; i++) {
          var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
              total = dataset._meta[Object.keys(dataset._meta)[0]].total,
              mid_radius = model.innerRadius + (model.outerRadius - model.innerRadius)/2,
              start_angle = model.startAngle,
              end_angle = model.endAngle,
              mid_angle = start_angle + (end_angle - start_angle)/2;

          var x = mid_radius * Math.cos(mid_angle);
          var y = mid_radius * Math.sin(mid_angle);

          ctx.fillStyle = '#fff';
          if (i == 3){ // Darker text color for lighter background
            ctx.fillStyle = '#444';
          }

          var val = dataset.data[i];
          var percent = String(Math.round(val/total*100)) + "%";

          if(val != 0) {
            ctx.fillText(dataset.data[i], model.x + x, model.y + y);
            // Display percent in another line, line break doesn't work for fillText
            ctx.fillText(percent, model.x + x, model.y + y + 15);
          }
        }
      });               
    }
  }
};

var pieChartCanvas = $("#pieChart");
var pieChart = new Chart(pieChartCanvas, {
  type: 'pie', // or doughnut
  data: data,
  options: pieOptions
});

{ pieceLabel: { mode: 'percentage', precision: 2 } }

pieceLabel: {
        fontColor: '#000'
    }

var pOptions = {
  onAnimationProgress: drawSegmentValues
};
var pieChart = new Chart(pieChartCanvas, {
  type: 'pie', // or doughnut
  data: data,
  options: pOptions
});