ChartJS：在工具提示中显示混合图表的所有标签

Question

我有下面的混合图表，带有条形图和线条：

生成上述图表的代码下方：

var data = [{
        label: 'Varience 1',
        data: [15, -6, -6, 7],
        borderColor: '#03A9F4',
        pointBackgroundColor: '#03A9F4',
        pointBorderWidth: 2,
        pointStyle: 'rect',
        type: 'line',
        steppedLine: true,
        borderWidth: 2
    }, {
        label: 'Varience 2',
        data: [24, -2, 3, 19],
        borderColor: '#FF5722',
        pointBackgroundColor: '#FF5722',
        pointBorderWidth: 2,
        pointStyle: 'rect',
        type: 'line',
        steppedLine: true,
        borderWidth: 2
    }, {
        label: 'Available',
        data: [72, 62, 55, 65],
        borderDash: [5, 5],
        borderColor: '#bbb',
        pointBackgroundColor: '#bbb',
        pointBorderWidth: 2,
        borderWidth: 2,
        type: 'line'
    }, {
        label: 'Budget',
        data: [50, 55, 45, 51],
        borderDash: [5, 5],
        borderColor: '#f0ab00',
        pointBackgroundColor: '#fff',
        pointBorderWidth: 2,
        borderWidth: 2,
        type: 'line'
    }, {
        label: 'Actual',
        data: [65, 49, 39, 58],
        backgroundColor: '#607D8B',
        pointBorderWidth: 3,
        borderWidth: 3
    }, {
        label: 'Last Year',
        data: [41, 51, 36, 39],
        borderColor: '#607D8B',
        backgroundColor: 'rgba(96, 125, 139, 0.25)',
        pointBorderWidth: 3,
        borderWidth: 3
    }];

data.forEach(function (obj) {
    obj.fill = 'false';
});

显示自定义工具提示的代码下方：

        tooltips: {
        callbacks: {
            label: function tooltipWithoutTotal(tooltipItem, data) {
                var type = data.datasets[tooltipItem.datasetIndex].label;
                var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                if (tooltipItem.datasetIndex !== data.datasets.length - 1) {
                    return type + " : " + value.toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, '1,');
                } else {
                    return [type + " : " + value.toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, '1,')];
                }
            }
        }
    }

使用上面的工具提示代码，我希望在工具提示中列出所有值（如下所示：https://jsfiddle.net/kingBethal/r23y0h6n/）。

但是，在工具提示中它只显示单个值。

这是 JSFiddle：https://jsfiddle.net/kingBethal/dqpusowy/6/

Answer 1

将 tooltip interaction mode 设置为 index:

options = {
    tooltips: {
        mode: 'index'
    }
}

结果：

ChartJS：在工具提示中显示混合图表的所有标签

ChartJS: Show all labels of a mixed chart in the tooltip

javascript

charts

tooltip

chart.js