在 react 中使用 chartjs 显示值或百分比

Question

I'm creating a pie chart in a react project with chartjs.我正在使用 chartjs 在反应项目中创建饼图。 But I'm not able to show any values on the different segments.但我无法在不同的细分市场上显示任何值。 I've tried different plugins but all of them aren't supported anymore.我尝试了不同的插件，但不再支持所有插件。

I'm open to any ideas.我对任何想法持开放态度。 That's how I'm rendering the chart at the moment:这就是我目前渲染图表的方式：

<Pie
  data={chartData}
  options={{
    responsive: true,
    plugins: {
        legend: {
            labels: {
                color: "white",
                font : {
                size: 16
            },
        }
      }
      },
    }}
/>

Answer 1

You can use the beta of the datalabels plugin by installing it like this:您可以通过像这样安装它来使用数据标签插件的测试版：

YARN:
yarn add chartjs-plugin-datalabels@next

NPM:
npm i chartjs-plugin-datalabels@next

Live example with chart.js v3: 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>

在 react 中使用 chartjs 显示值或百分比

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-06-07 15:36:10

在 react 中使用 chartjs 显示值或百分比

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-06-07 15:36:10

解决方案1
0 已采纳 2021-06-07 15:36:10