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 回调似乎返回一个字符串而不是一个数组。