를 표시하는 방법 파이 차트 데이터의 값을 각각에 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();
}

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>';

Nithya.K
편집된 질문29일 10월 2015 в 6:06
프로그래밍
charts javascript php jquery
27일 10월 2015 в 8:48
1490 파운드
질문에 대한 의견 (6)

대한Chart.js 2.0까지 차트 개체 데이터가 변경되었습니다. 를 사용하는 사람들을 위해 Chart.js 2.0+,아래의 예를 사용하여 HTML5CanvasfillText()에서 표시하는 데이터 값의 내부에는 원형 슬라이스입니다. 코드 작동을 위해 도넛 차트,너무,유일한 차이는 유형:'파이'대type:'도넛'`을 만들 때 차트.

스크립트:

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
});

HTML

[jsFiddle][1]

isherwood
편집된 답변26일 9월 2019 в 3:19
해설 (2)

내가 발견한`Chart.js 플러그인을 정확히 무엇을 원하는: https://github.com/emn178/Chart.PieceLabel.js

해설 (0)
해결책

내가 무엇을 알고 나오는't 믿 Chart.JS 는 어떤 기능을 그리는 데 도움이에 텍스트 파이 차트. 그러나지 않는't 을 의미할 수 있't do it 에 자신을 기본 JavaScript. 나는 것입니다 예를 들어주에 비밀번호를 변경하는 방법은 아래 코드를 그리기 위한 텍스트에 대한 각 세그먼트에서는 파이 차트:


function drawSegmentValues()
{
    for(var i=0; i
Spencer Wieczorek
편집된 답변28일 10월 2015 в 5:10
해설 (9)

할 수 있는 거PieceLabel플러그인에 대한 Chart.js.

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

<델>Demo| 문서</델>

플러그인을 가지고 나타나는 새로운 위치(이름):Demo오피.

isherwood
편집된 답변26일 9월 2019 в 3:20
해설 (1)

@Tran Hung's 답 작품을 완벽하다. 으로 개선이 보이지 않는 값은 0 입니다. 말하는 5 가지 요소와 그들의 2 0 과 그들의 나머지 값이 있을 솔루션을 위에 보여줍 0 0%. 그것은 더하는 필터와 동일하지 않 0 확인!

var val=합니다.데이터[i]; var%의=String(수학이다.라운드(val/총*100))+"%";

if(val!= 0){ ctx.fillText(합니다.데이터[i],모델입니다.x+x,모델입니다.y+y); //디스플레센트에서 또 다른 라인,라인을 끊지 않't 작업에 대한 fillText ctx.fillText(퍼센트,모델입니다.x+x,모델입니다.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
});
해설 (0)

작업을 수행하는 가장 쉬운 방법은 이와 Chartjs. 아래 추가 라인에서 옵션:

pieceLabel: {
        fontColor: '#000'
    }

행운을 빕

해설 (3)