首页 文章

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

提问于
浏览
1

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

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 回答

  • 1

    tooltip interaction mode设置为 index

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

    结果:

    enter image description here

相关问题