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

Question

我正在使用 chartjs 在反应项目中创建饼图。 但我无法在不同的细分市场上显示任何值。 我尝试了不同的插件，但不再支持所有插件。

我对任何想法持开放态度。 这就是我目前渲染图表的方式：

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

Answer 1

您可以通过像这样安装它来使用数据标签插件的测试版：

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>

在 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