在反应中用 chartjs 显示值或百分比
showing values or percentages with chartjs in react
我正在使用 chartjs 在 React 项目中创建饼图。但是我无法在不同的细分市场上显示任何值。我尝试了不同的插件,但所有插件都不再受支持。
我愿意接受任何想法。这就是我现在渲染图表的方式:
<Pie
data={chartData}
options={{
responsive: true,
plugins: {
legend: {
labels: {
color: "white",
font : {
size: 16
},
}
}
},
}}
/>
您可以像这样安装 datalabels 插件的测试版:
YARN:
yarn add chartjs-plugin-datalabels@next
NPM:
npm i chartjs-plugin-datalabels@next
使用 chart.js v3 的实例:
Chart.register(ChartDataLabels);
var options = {
type: 'pie',
data: {
labels: ['orange', 'blue', 'gray'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3],
borderWidth: 1,
backgroundColor: ['orange', 'blue', 'gray']
}]
},
options: {
plugins: {
datalabels: {
backgroundColor: function(context) {
return context.dataset.backgroundColor;
},
borderColor: 'white',
borderRadius: 25,
borderWidth: 3,
color: 'white',
font: {
weight: 'bold'
},
padding: 6,
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0-rc"></script>
</body>
我正在使用 chartjs 在 React 项目中创建饼图。但是我无法在不同的细分市场上显示任何值。我尝试了不同的插件,但所有插件都不再受支持。
我愿意接受任何想法。这就是我现在渲染图表的方式:
<Pie
data={chartData}
options={{
responsive: true,
plugins: {
legend: {
labels: {
color: "white",
font : {
size: 16
},
}
}
},
}}
/>
您可以像这样安装 datalabels 插件的测试版:
YARN:
yarn add chartjs-plugin-datalabels@next
NPM:
npm i chartjs-plugin-datalabels@next
使用 chart.js v3 的实例:
Chart.register(ChartDataLabels);
var options = {
type: 'pie',
data: {
labels: ['orange', 'blue', 'gray'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3],
borderWidth: 1,
backgroundColor: ['orange', 'blue', 'gray']
}]
},
options: {
plugins: {
datalabels: {
backgroundColor: function(context) {
return context.dataset.backgroundColor;
},
borderColor: 'white',
borderRadius: 25,
borderWidth: 3,
color: 'white',
font: {
weight: 'bold'
},
padding: 6,
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0-rc"></script>
</body>