在 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