Chart.js 如何將附加值嵌入雷達圖中的每個數據點

Question

使用折線圖，我可以嵌入其他數據並將其顯示在工具提示中。 但是，如果我嘗試對雷達圖執行相同操作，則不會顯示任何值。 如何向雷達圖上的每個數據點添加基本信息並將其顯示在工具提示中？

下面我有一個工作折線圖，其中包含每個數據點的附加值，並與工具提示一起顯示。 此外，我有相同的圖表， type: 'radar'

 var data = [{ //x: 'Item 1', y: 2, id: 'test-10' }, { //x: 'Item 2', y: 4, id: 'test-20' }, { //x: 'Item 3', y: 5, id: 'test-30' }, { //x: 'Item 4', y: 6, id: 'test-40' }, { //x: 'Item 5', y: 8, id: 'test-50' }, { //x: 'Item 6', y: 12, id: 'test-60' }]; var ctx = document.getElementById('lineChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'line', data: { labels: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'], datasets: [{ label: 'Dataset 1', data: data, borderColor: "#3e95cd", fill: false }] }, options: { tooltips: { enabled: true, mode: 'single', callbacks: { label: function (tooltipItems, data) { var multistringText = ['Value: ' + tooltipItems.yLabel]; multistringText.push('ID: ' + data['datasets'][tooltipItems.datasetIndex]['data'][tooltipItems.index].id); return multistringText; } } }, } }); var ctx = document.getElementById('radarChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'radar', data: { labels: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'], datasets: [{ label: 'Dataset 1', data: data, borderColor: "#3e95cd", fill: false }] }, options: { tooltips: { enabled: true, mode: 'single', callbacks: { label: function (tooltipItems, data) { var multistringText = ['Value: ' + tooltipItems.yLabel]; multistringText.push('ID: ' + data['datasets'][tooltipItems.datasetIndex]['data'][tooltipItems.index].id); return multistringText; } } }, } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js"></script> <div style="width: 400px; display: inline-block"> <canvas id="lineChart" width="100" height="70"></canvas> </div> <div style="width: 300px; display: inline-block"> <canvas id="radarChart" width="50" height="50"></canvas> </div>

Answer 1

試試這樣：

 var data = [{ //x: 'Item 1', y: 2, id: 'test-10' }, { //x: 'Item 2', y: 4, id: 'test-20' }, { //x: 'Item 3', y: 5, id: 'test-30' }, { //x: 'Item 4', y: 6, id: 'test-40' }, { //x: 'Item 5', y: 8, id: 'test-50' }, { //x: 'Item 6', y: 12, id: 'test-60' }]; var ctx = document.getElementById('lineChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'line', data: { labels: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'], datasets: [{ label: 'Dataset 1', data: data, borderColor: "#3e95cd", fill: false }] }, options: { tooltips: { enabled: true, mode: 'single', callbacks: { label: function (tooltipItems, data) { var multistringText = ['Value: ' + tooltipItems.yLabel]; multistringText.push('ID: ' + data['datasets'][tooltipItems.datasetIndex]['data'][tooltipItems.index].id); return multistringText; } } }, } }); var ctx = document.getElementById('radarChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'radar', data: { labels: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'], datasets: [{ label: 'Dataset 1', data: data.map(item => item.y), borderColor: "#3e95cd", fill: false }] }, options: { tooltips: { enabled: true, mode: 'single', callbacks: { label: function (tooltipItems) { return 'Value: ' + data[tooltipItems.index].y + ', ID: ' + data[tooltipItems.index].id; } } }, } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js"></script> <div style="width: 400px; display: inline-block"> <canvas id="lineChart" width="100" height="70"></canvas> </div> <div style="width: 300px; display: inline-block"> <canvas id="radarChart" width="50" height="50"></canvas> </div>

我認為關鍵是要了解每種圖表類型希望如何構建數據。 在上面， map() function 用於將y值呈現為雷達圖的數組。 然后，為了獲得正確的工具提示信息，工具提示索引用於從完整data數組中檢索該元素的值。 label 回調似乎返回一個字符串而不是一個數組。