數據集的Chart.JS格式標簽不同

Question

我正在使用Chart.JS創建一個組合圖，它是一個條形/線形組合。 我想用%符號顯示的dataset[0]的標簽和我想用$符號顯示的dataset[1]的標簽。 現在，當我提到標簽時，我的意思是當您將鼠標懸停在條形圖上時，顯示的內容及其信息。 我嘗試了以下語法，但是甚至都沒有圖表顯示（我更改了代碼以添加if語句來嘗試解決dataset[0]和dataset[1] ）

使dataset[0]顯示%符號和dataset[1]顯示$符號的正確方法是什么？

        var labelsarr = ["Red 12", "Red 13", "Yellow 12", "Yellow 13", "Blue 12", "Blue 13"],
    ;

    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labelsarr,
                    datasets: [{
                            type: 'line',
                            fill: false,
                            label: 'Percent',
                            backgroundColor: 'rgba(255,0,0,1)',
                            borderColor: 'rgba(255,0,0,1)',
                            data: [3, 4, 10, 5, 8, 7],
                        }, {}
                        data: [12, 19, 3, 5, 2, 3],
                        label: 'Total Revenue',
                        backgroundColor: 'rgba(0, 129, 214, 0.8)',
                    }]
            },
            options: {
                tooltips: {
                    callbacks: {
                        if (chart.data.datasets = [1]) {
                            label: function(t, d) {
                                var xLabel = d.datasets[t.datasetIndex].label;
                                var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
                                return xLabel + ': ' + yLabel;
                            }
                        }
                        if (chart.data.datasets = [0]) {
                            label: function(value) {
                                return value + "%"
                            }
                        }
                    }
                }
            },
            legend: {
                display: false,
                position: 'top',
            },
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                        callback: function(value, index, values) {
                            if (parseInt(value) >= 1000) {
                                return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                            } else {
                                return '$' + value;
                            }
                        }
                    }
                }]
            }
        },
        plugins: [{
            beforeDraw: function(chart) {
                var labels = chart.data.labels;
                labels.forEach(function(e, i) {
                    var bar = chart.data.datasets[1]._meta[0].data[i]._model;
                    var dataPoint = e.split(/\s/)[1];
                    if (dataPoint === '12')
                        bar.backgroundColor = 'blue';
                    else if (dataPoint === '13')
                        bar.backgroundColor = 'orange';
                });
            }
        }]
    });

Answer 1

使用以下工具提示回調函數：

callbacks: {
   label: function(t, d) {
      if (t.datasetIndex === 0) {
         var xLabel = d.datasets[t.datasetIndex].label;
         var yLabel = t.yLabel + '%';
         return xLabel + ': ' + yLabel;
      } else if (t.datasetIndex === 1) {
         var xLabel = d.datasets[t.datasetIndex].label;
         var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
         return xLabel + ': ' + yLabel;
      }
   }
}

ᴡᴏʀᴋɪɴɢᴇxᴀᴍᴘʟᴇ

 var labelsarr = ["Red 12", "Red 13", "Yellow 12", "Yellow 13", "Blue 12", "Blue 13"]; var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'bar', data: { labels: labelsarr, datasets: [{ type: 'line', fill: false, label: 'Percent', backgroundColor: 'rgba(255,0,0,1)', borderColor: 'rgba(255,0,0,1)', data: [3, 4, 10, 5, 8, 7], }, { data: [12, 19, 3, 5, 2, 3], label: 'Total Revenue', backgroundColor: 'rgba(0, 129, 214, 0.8)', }] }, options: { tooltips: { callbacks: { label: function(t, d) { if (t.datasetIndex === 0) { var xLabel = d.datasets[t.datasetIndex].label; var yLabel = t.yLabel + '%'; return xLabel + ': ' + yLabel; } else if (t.datasetIndex === 1) { var xLabel = d.datasets[t.datasetIndex].label; var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ",") : '$' + t.yLabel; return xLabel + ': ' + yLabel; } } } }, legend: { display: false, position: 'top', }, scales: { yAxes: [{ ticks: { beginAtZero: true, callback: function(value, index, values) { if (parseInt(value) >= 1000) { return '$' + value.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ","); } else { return '$' + value; } } } }] } }, plugins: [{ beforeDraw: function(chart) { var labels = chart.data.labels; labels.forEach(function(e, i) { var bar = chart.data.datasets[1]._meta[0].data[i]._model; var dataPoint = e.split(/\\s/)[1]; if (dataPoint === '12') bar.backgroundColor = 'blue'; else if (dataPoint === '13') bar.backgroundColor = 'orange'; }); } }] }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> <canvas id="myChart"></canvas> 

一些語法問題已修復，請仔細查找。