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