如何更改chartjs數據文本

Question

你能幫我制作圖片中的項目嗎？

我需要做的是將chartjs中的數據文本一個接一個地寫入圖像中的一個。

以下是我在 codepen 中的代碼： https ://codepen.io/korayhan-aslan/pen/RwQvVbV

enter code here

Answer 1

為此，請將 generateLabels 函數中“ text ”的值從字符串更改為數組，並添加工具提示插件。

在 generateLabels 函數中修改文本

return {
        text: [typerOne,typerTwo], # before typerTwo + ": " + typerOne
        fillStyle: style.backgroundColor,
        strokeStyle: style.borderColor,
        lineWidth: style.borderWidth,
        pointStyle: pointStyle,
        hidden: !chart.getDataVisibility(i),
                  
        // Extra data used for toggling the correct item
        index: i
};

修改工具提示標簽

tooltip: {
            callbacks: {
                label: function(context) {
                    return [context.formattedValue, context.label]
                }
            }
        },

 // donut chart start const donutData = { labels: [ 'Başarılı İşlem', 'Bekleyen İşlem', 'Başarısız İşlem' ], datasets: [{ data: [1248, 1182, 1020], backgroundColor: [ '#0FC351', '#FD865E', '#F75555' ], borderRadius: 50, borderWidth: 0, spacing: -20, hoverOffset: 4 }] }; var donutCtx = document.getElementById('donutChart'); var myDonutChart = new Chart(donutCtx, { type: "doughnut", data: donutData, options: { layout: { padding: { top: 40, } }, responsive: true, aspectRatio: 2, plugins: { tooltip: { callbacks: { label: function(context) { return [context.formattedValue, context.label] } } }, legend: { position: "right", labels: { font: { size: 12, weight: 600 }, color: "#2D3748", boxWidth: 10, boxHeight: 10, usePointStyle: true, pointStyle: "circle", padding: 25, generateLabels(chart) { const data = chart.data; if (data.labels.length && data.datasets.length) { const { labels: { pointStyle } } = chart.legend.options; return data.labels.map((label, i) => { const meta = chart.getDatasetMeta(0); const style = meta.controller.getStyle(i); let typerOne = `${data['datasets'][0].data[i]} Adem`; let typerTwo = `${label}`; return { text: [typerOne, typerTwo], fillStyle: style.backgroundColor, strokeStyle: style.borderColor, lineWidth: style.borderWidth, pointStyle: pointStyle, hidden: !chart.getDataVisibility(i), // Extra data used for toggling the correct item index: i }; }); } return []; } } }, datalabels: { display: false } }, cutout: "80%", radius: "80%", } }); // donut chart end

 .donut-chartx { position: relative; @media (min-width: 1600px) { min-height: 262px; } @media (min-width:1400px) and (max-width:1599px) { min-height: 230px; } @media (min-width:992px) and (max-width:1399px) { min-height: 200px; } background-color: #ffffff; -webkit-border-radius: 16px; -moz-border-radius: 16px; -ms-border-radius: 16px; border-radius: 16px; border: 1px solid #edf2f7; .chart-title { position: absolute; left: 20px; top: 20px; font-weight: 800; @media (min-width: 1600px) { font-size:18px; } @media (min-width:1400px) and (max-width:1599px) { font-size: 14px; } @media (max-width:1399px) { font-size: 12px; } } .chart-select { position: absolute; right: 20px; @media (min-width: 1400px) { top:20px; } @media (min-width:1200px) and (max-width:1399px) { top: 13px; } @media (max-width:1199px) { top: 12px; } .selectric { background-color: @bglighter!important; } .selectric .label { @media (min-width: 1600px) { font-size: 12px; height: 36px!important; line-height: 36px!important; } @media (min-width:1200px) and (max-width:1599px) { font-size: 12px; height: 30px!important; line-height: 30px!important; padding: 0 56px 0 15px; } @media (min-width:768px) and (max-width:1199px) { font-size: 12px; height: 30px!important; line-height: 30px!important; padding: 0 35px 0 15px; } @media (max-width:767px) { font-size: 10px; height: 30px!important; line-height: 30px!important; padding: 0 56px 0 15px; } font-weight: 600; color:@main-font-color; } .selectric-items li { @media (min-width: 768px) { font-size:12px!important; } @media (max-width:767px) { font-size: 10px!important; } } } }

 <div class="donut-chart-content donut-chartx mb-lg-0 mb-3"> <div class="chart-title">Yatırım İstatistikleri</div> <div class="chart-select"> <div class="select-basic"> <select name="" id="" class="form-select select-box"> <option value="">Aylık</option> <option value="">Yıllık</option> <option value="">Haftalık</option> </select> </div> </div> <canvas id="donutChart" width="300" height="300"></canvas> </div> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>