[英]ChartJS: datalabels: show percentage value in Pie piece
我有一個帶有四個標簽的餅圖:
var data = [{
data: [50, 55, 60, 33],
labels: ["India", "China", "US", "Canada"],
backgroundColor: [
"#4b77a9",
"#5f255f",
"#d21243",
"#B27200"
],
borderColor: "#fff"
}];
使用chartjs-plugin-datalabels
插件,我想用下面的代碼在每個 Pie 塊中顯示百分比值:
formatter: (value, ctx) => {
let datasets = ctx.chart.data.datasets;
if (datasets.indexOf(ctx.dataset) === datasets.length - 1) {
let sum = 0;
datasets.map(dataset => {
sum += dataset.data[ctx.dataIndex];
});
let percentage = Math.round((value / sum) * 100) + '%';
return percentage;
} else {
return percentage;
}
},
color: '#fff',
}
我得到所有餡餅塊的 100% 值,而不是各自的百分比。 這是 JSFiddle ( https://jsfiddle.net/kingBethal/a1Lvn4eb/7/ )
我有一個帶有四個標簽的餅圖:
var data = [{
data: [50, 55, 60, 33],
labels: ["India", "China", "US", "Canada"],
backgroundColor: [
"#4b77a9",
"#5f255f",
"#d21243",
"#B27200"
],
borderColor: "#fff"
}];
我想使用chartjs-plugin-datalabels
插件使用以下代碼在每個Pie塊中顯示百分比值:
formatter: (value, ctx) => {
let datasets = ctx.chart.data.datasets;
if (datasets.indexOf(ctx.dataset) === datasets.length - 1) {
let sum = 0;
datasets.map(dataset => {
sum += dataset.data[ctx.dataIndex];
});
let percentage = Math.round((value / sum) * 100) + '%';
return percentage;
} else {
return percentage;
}
},
color: '#fff',
}
我為所有餅塊獲得了100%的價值,而不是各自的百分比。 這是JSFiddle( https://jsfiddle.net/kingBethal/a1Lvn4eb/7/ )
我有一個帶有四個標簽的餅圖:
var data = [{
data: [50, 55, 60, 33],
labels: ["India", "China", "US", "Canada"],
backgroundColor: [
"#4b77a9",
"#5f255f",
"#d21243",
"#B27200"
],
borderColor: "#fff"
}];
我想使用chartjs-plugin-datalabels
插件使用以下代碼在每個Pie塊中顯示百分比值:
formatter: (value, ctx) => {
let datasets = ctx.chart.data.datasets;
if (datasets.indexOf(ctx.dataset) === datasets.length - 1) {
let sum = 0;
datasets.map(dataset => {
sum += dataset.data[ctx.dataIndex];
});
let percentage = Math.round((value / sum) * 100) + '%';
return percentage;
} else {
return percentage;
}
},
color: '#fff',
}
我為所有餅塊獲得了100%的價值,而不是各自的百分比。 這是JSFiddle( https://jsfiddle.net/kingBethal/a1Lvn4eb/7/ )
我有一個帶有四個標簽的餅圖:
var data = [{
data: [50, 55, 60, 33],
labels: ["India", "China", "US", "Canada"],
backgroundColor: [
"#4b77a9",
"#5f255f",
"#d21243",
"#B27200"
],
borderColor: "#fff"
}];
我想使用chartjs-plugin-datalabels
插件使用以下代碼在每個Pie塊中顯示百分比值:
formatter: (value, ctx) => {
let datasets = ctx.chart.data.datasets;
if (datasets.indexOf(ctx.dataset) === datasets.length - 1) {
let sum = 0;
datasets.map(dataset => {
sum += dataset.data[ctx.dataIndex];
});
let percentage = Math.round((value / sum) * 100) + '%';
return percentage;
} else {
return percentage;
}
},
color: '#fff',
}
我為所有餅塊獲得了100%的價值,而不是各自的百分比。 這是JSFiddle( https://jsfiddle.net/kingBethal/a1Lvn4eb/7/ )
我有一個帶有四個標簽的餅圖:
var data = [{
data: [50, 55, 60, 33],
labels: ["India", "China", "US", "Canada"],
backgroundColor: [
"#4b77a9",
"#5f255f",
"#d21243",
"#B27200"
],
borderColor: "#fff"
}];
我想使用chartjs-plugin-datalabels
插件使用以下代碼在每個Pie塊中顯示百分比值:
formatter: (value, ctx) => {
let datasets = ctx.chart.data.datasets;
if (datasets.indexOf(ctx.dataset) === datasets.length - 1) {
let sum = 0;
datasets.map(dataset => {
sum += dataset.data[ctx.dataIndex];
});
let percentage = Math.round((value / sum) * 100) + '%';
return percentage;
} else {
return percentage;
}
},
color: '#fff',
}
我為所有餅塊獲得了100%的價值,而不是各自的百分比。 這是JSFiddle( https://jsfiddle.net/kingBethal/a1Lvn4eb/7/ )
我正在使用 ChartJS v3.7.0 和 chartjs-plugin-datalabels v2.0.0 和這個答案:
https://stackoverflow.com/a/59403435/6830478
對我來說真的不起作用,而我只是想讓百分比保持最新,在隱藏元素時也是如此。 似乎ctx.dataset._meta
不再可用了。 我想出了一些丑陋的猴子補丁:
formatter: function(value, context) {
var hiddens = context.chart._hiddenIndices;
var total = 0;
var datapoints = context.dataset.data;
datapoints.forEach((val, i) => {
if (hiddens[i] != undefined) {
if (!hiddens[i]) {
total += val;
}
} else {
total += val;
}
});
var percentage = (value / total * 100).toFixed(2) + '%';
var out = context.chart.data.labels[context.dataIndex] + '\n' + percentage;
return out;
}
Hopw 這可能對任何人都有幫助。 干杯。
顯然, ChartDataLabels
現在是從另一個包chartjs-plugin-datalabels
。 我使用npm i chartjs-plugin-datalabels
安裝了這個包,然后修改了我的代碼如下。
import React from "react";
import ChartDataLabels from "chartjs-plugin-datalabels";
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
import { Pie } from "react-chartjs-2";
ChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels);
export default function PieChart() {
return (
<>
<Pie
options={{
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: false,
datalabels: {
formatter: (value, ctx) => {
let sum = 0;
let dataArr = ctx.chart.data.datasets[0].data;
dataArr.map((data) => {
sum += data;
});
let percentage = ((value * 100) / sum).toFixed(2) + "%";
return percentage;
},
color: "#FFF",
},
},
onHover: function (e) {
e.native.target.style.cursor = "pointer";
},
rotation: 270,
events: ["click"],
onClick: function (event, element) {
console.log(element[0].index);
},
}}
data={{
labels: ["Above 60%", "Below 60%"],
datasets: [
{
data: [20, 10],
backgroundColor: ["#3A925D", "#FD7E14"],
borderWidth: 0,
},
],
}}
/>
</>
);
}
這是 chart.js >= 3.x 和 chartjs-plugin-datalabels >= 2.x 的更新
chartjs-plugin-datalabels
插件不再自動注冊( 文檔)
你必須手動完成
為所有圖表注冊插件
Chart.register(ChartDataLabels)
或僅適用於特定圖表
var chart = new Chart(ctx, {
plugins: [ChartDataLabels],
options: {
// ...
}
})
這是下面的代碼來呈現餅圖
var data = [{ data: [50, 55, 60, 33], backgroundColor: [ "#4b77a9", "#5f255f", "#d21243", "#B27200" ], borderColor: "#fff" }]; var options = { tooltips: { enabled: false }, plugins: { datalabels: { formatter: (value, ctx) => { const datapoints = ctx.chart.data.datasets[0].data const total = datapoints.reduce((total, datapoint) => total + datapoint, 0) const percentage = value / total * 100 return percentage.toFixed(2) + "%"; }, color: '#fff', } } }; var ctx = document.getElementById("pie-chart").getContext('2d'); var myChart = new Chart(ctx, { type: 'pie', data: { labels: ['India', 'China', 'US', 'Canada'], datasets: data }, options: options, plugins: [ChartDataLabels], });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js"></script> <style> .container { width: 40%; margin: 5px auto; } </style> <div class="container"> <canvas id="pie-chart"></canvas> </div>
如果您使用 nodejs:請按照以下步驟操作:
https://chartjs-plugin-datalabels.netlify.app/guide/#table-of-contents
正如一些人提到的, context.dataset._meta[0].total
似乎已在 chart.js 版本 3 及更高版本中被刪除並且不再起作用。 相反,我使用了context.chart.getDatasetMeta(0).total
並且它對我有用 - 它在餅圖中顯示百分比值,並且在單擊圖例時根據過濾后的總數更新值。
options:{
plugins:{
datalabels: {
color: 'white',
formatter: function(value, context) {
return Math.round(value/context.chart.getDatasetMeta(0).total * 100) + "%" ;
}
}
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.