내가 사용하고 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>';
대한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
<canvas id="pieChart" width=200 height=200></canvas>
[jsFiddle][1]
내가 무엇을 알고 나오는't 믿 Chart.JS 는 어떤 기능을 그리는 데 도움이에 텍스트 파이 차트. 그러나지 않는't 을 의미할 수 있't do it 에 자신을 기본 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);
}
}
파이 차트의 배열을 가지고 있습니다 세그먼트에 저장됩PieChart.세그먼트,우리는 볼 수 있습니다
startAngle과
endAngle이 세그먼트의 각도를 결정하기에는 텍스트가 될 것
middleAngle. 그런 다음 우리는 우리 것을 그 방향으로 이동하여
Radius/2`을 중점의 차트에서 라디안입니다.
위의 예제에서 다른 깨끗한 작업이 완료되 때문에 위치의 텍스트에 그려진fillText()
되는 오른쪽 상단 모서리에,우리는 얻을 필요가 일부 오프셋 값을 정한다. 그리고 마지막으로textSize
에 따라 결정된 크기의 차트,더 큰 차트 더 큰 텍스트입니다.
[를 들어 바이올린](
)으로 약간의 수정을 변경할 수 있습니다 이산 숫자 값에 대한 데이터 집합으로 백분 숫자는 그래프. 이렇게 얻을 총value
항목에서의 데이터 집합 이totalValue
. 그런 다음에 각 세그먼트를 찾을 수 있습 퍼센트를 수행하여:
Math.round(myPieChart.segments[i].value/totalValue*100)+'%';
섹션 여기myPieChart.세그먼트[i].치/totalValue
은 무엇을 계산합 의 세그먼트에서합니다. 예를 들면 현재 세그먼트에 의 값을 가지고 있었50
totalValue 었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 + '%';
[바이올린을 예의 백분과 함께 소수](
2/)[바이올린을 예의 백분과 정수](
1/)할 수 있는 거PieceLabel플러그인에 대한 Chart.js.
{ pieceLabel: { mode: 'percentage', precision: 2 } }
@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
});