javascript - Chart.JS 未正确格式化 Y-Axis-1

Question

我使用以下语法将显示点格式化为 $ 和 %。嗯，我是这么想的。我的问题是两个显示点都显示为 $，几乎就像 y-axis-1 根本没有被拾取。我是否缺少右括号或语法中的一些愚蠢的东西？是什么导致 % 未应用于折线图？

    var labelsarr = ["Richard 14", "Richard 15", "Jason 14", "Jason 15", "Jack 14", "Jack 15"];
var ctx = document.getElementById('canvas1').getContext('2d');
var chart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: labelsarr,
        datasets: [{
                type: 'line',
                fill: false,
                label: 'Sale Total',
                backgroundColor: 'rgba(255,0,0,1)',
                borderColor: 'rgba(255,0,0,1)',
                data: values1,
                yAxisID: 'y-axis-1'
            }, {
                label: 'Sale Total',
                backgroundColor: 'rgba(0, 129, 214, 0.8)',
                data: values
            }]
    },
    options: {
        tooltips: {
            callbacks: {
                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;
                }
            }
        },
        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;
                            }
                        }
                    }
                }, {
                    id: 'y-axis-1',
                    position: 'right',
                    ticks: {
                        beginAtZero: true,
                        callback: function (value, index, values) {
                            return value + '%';
                        }
                    }
                }]
        }
    }
});

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 {
         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 = ["Richard 14", "Richard 15", "Jason 14", "Jason 15", "Jack 14", "Jack 15"];
var values = [1, 2, 3, 4, 5, 6];
var values1 = [1, 2, 3, 4, 5, 6];

var ctx = document.getElementById('canvas1').getContext('2d');
var chart = new Chart(ctx, {
   type: 'bar',
   data: {
      labels: labelsarr,
      datasets: [{
         type: 'line',
         fill: false,
         label: 'Sale Total',
         backgroundColor: 'rgba(255,0,0,1)',
         borderColor: 'rgba(255,0,0,1)',
         data: values1,
         yAxisID: 'y-axis-1'
      }, {
         label: 'Sale Total',
         backgroundColor: 'rgba(0, 129, 214, 0.8)',
         data: values
      }]
   },
   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 {
                  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;
                  }
               }
            }
         }, {
            id: 'y-axis-1',
            position: 'right',
            ticks: {
               beginAtZero: true,
               callback: function(value, index, values) {
                  return value + '%';
               }
            }
         }]
      }
   }
});

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