ChartJS 調整餅圖圖例

Question

我想調整我的 ChartJS/React-chartjs-2 餅圖以顯示均勻堆疊在餅圖一側的圖例。 我試圖操縱 options.legend.position 但它似乎沒有改變。 下面是代碼片段和我的餅圖的屏幕截圖。 我正在使用 chart.js 3.9.0 / react-chartjs-2 4.3.1 / react 18.2.0

謝謝！

 const options = { title:{ display: true, text: "Current Allocations" }, legend: { position: "right", }, responsive: true, animation: { animateRotate: false, animateScale: true, }, }; const data = { labels: [ "Cash / Cash Equivalents - $" + cashTotal.toLocaleString() + " - " + cashPercent.toFixed(0) + "%", "Fixed Income - $" + fixedIncomeTotal.toLocaleString() + " - " + fixedIncomePecent.toFixed(0) + "%", "Real Estate - $" + realEstateTotal.toLocaleString() + " - " + realEstatePercent.toFixed(0) + "%", "Private Equities - $" + privateEquityTotal.toLocaleString() + " - " + privateEquityPercent.toFixed(0) + "%", "Commodities / Futures - $" + commoditiesAndFuturesTotal.toLocaleString() + " - " + commoditiesAndFuturesPercent.toFixed(0) + "%", "Blockchain and Crypto - $" + blockChainTotal.toLocaleString() + " - " + blockChainPercent.toFixed(0) + "%", "Equities - $" + equitiesTotal.toLocaleString() + " - " + equitiesPercent.toFixed(0) + "%", "Oil and Gas / Energy - $" + oilAndGasTotal.toLocaleString() + " - " + oilAndGasPercent.toFixed(0) + "%", "Longevity - $" + longevityTotal.toLocaleString() + " - " + longevityPercent.toFixed(0) + "%", "Life Insurance - $" + lifeInsuranceTotal.toLocaleString() + " - " + lifeInsurancePercent.toFixed(0) + "%", ], datasets: [ { data: [ cashTotal, fixedIncomeTotal, realEstateTotal, privateEquityTotal, commoditiesAndFuturesTotal, blockChainTotal, equitiesTotal, oilAndGasTotal, longevityTotal, lifeInsuranceTotal, ], backgroundColor: [ "rgba(121, 224, 162, 0.8)", "rgba(93, 217, 99, 0.8)", "rgba(174, 209, 69, 0.8)", "rgba(201, 134, 46, 0.8)", "rgba(194, 25, 70, 0.8)", "rgba(95, 8, 105, 0.8)", "rgba(18, 10, 102, 0.8)", "rgba(12, 61, 92, 0.8)", "rgba(18, 91, 115, 0.8)", "rgba(88, 177, 187, 0.8)", ], }, ], }; return ( <div style={{ width: "500px" }}> <Pie data={data} options={options} /> </div> );

Answer 1

我可以通過將 legend.position 從 options 移動到 options.plugins 來解決這個問題

 const options = { responsive: true, animation: { animateRotate: false, animateScale: true, }, plugins: { legend: { position: "right", }, title:{ display: true, text: "Current Allocations", }, } };