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

时间:2018-08-28 20:36:57

标签: javascript charts tooltip chart.js

我有下面的混合图表,带有长条和线:

mixed chart

在生成以上图表的代码下面:

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/

1 个答案:

答案 0 :(得分:1)

tooltip interaction mode设置为index

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

结果:

enter image description here