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()函数将y值表示为雷达图的数组。然后，为了获得正确的工具提示信息，使用工具提示索引从完整的data数组中检索该元素的值。label callback似乎返回字符串而不是数组。