chart.js - Chartjs v2-多个数据集(条形和线形)的格式工具提示

Question

阅读了大量有关如何使用工具提示回调在ChartJS v2.x中格式化工具提示的内容。到目前为止，我已经取得了成功，但是发现我无法为我拥有的两个数据集定义两种不同的格式。

作为更多上下文，我在条形图的上方叠加了一个折线图：


我的柱线数据是数字的（以百万为单位，并且需要四舍五入和截断）。
示例：22345343需要在工具提示中显示为22M





我的行数据是一种货币
示例：tooptip中的146.36534需要显示为$ 146.37




到目前为止，这是我的简短WIP代码。这会将工具提示格式化为四舍五入并包含$符号。如何扩展它，以便可以在工具提示中分别正确格式化条形数据？

tooltips: {
                mode: 'index',
                intersect: false,
                callbacks: {
                    label: function(tooltipItem, data) {
                        return "$" + Number(tooltipItem.yLabel).toFixed(2).replace(/./g, function(c, i, a) {
                                    return i > 0 && c !== "." && (a.length - i) % 3 === 0 ? "," + c : c;
                                });
                    }
                }
            }

Answer 1

您可以使用以下工具提示回调函数来实现这一点...

callbacks: {
    label: function (t, d) {
        if (t.datasetIndex === 0) {
            return '$' + t.yLabel.toFixed(2)
        } else if (t.datasetIndex === 1) {
            return Math.round(+t.yLabel.toString().replace(/(\d{2})(.*)/, '$1.$2')) + 'M';
        }
    }
}

ᴅᴇᴍᴏ

var ctx = document.getElementById("canvas").getContext("2d");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["January", "February", "March", "April", "May"],
        datasets: [{
            type: 'line',
            label: "Sales",
            data: [144.36534, 146.42534, 145.23534, 147.19534, 145],
            fill: false,
            borderColor: '#EC932F',
            backgroundColor: '#EC932F',
            tension: 0,
            yAxisID: 'y-axis-2'
        }, {
            type: 'bar',
            label: "Visitor",
            data: [22345343, 23345343, 24345343, 25345343, 230245343],
            backgroundColor: '#71B37C',
            yAxisID: 'y-axis-1'
        }]
    },
    options: {
        responsive: false,
        tooltips: {
            mode: 'index',
            intersect: false,
            callbacks: {
                label: function (t, d) {
                    if (t.datasetIndex === 0) {
                        return '$' + t.yLabel.toFixed(2);
                    } else if (t.datasetIndex === 1) {
                        if (t.yLabel.toString().length === 9) {
                            return Math.round(+t.yLabel.toString().replace(/(\d{3})(.*)/, '$1.$2')) + 'M';
                        } else return Math.round(+t.yLabel.toString().replace(/(\d{2})(.*)/, '$1.$2')) + 'M';
                    }
                }
            }
        },
        scales: {
            yAxes: [{
                id: "y-axis-1",
                position: "left"
            }, {
                id: "y-axis-2",
                position: "right"
            }]
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="canvas" width="400" height="190"></canvas>