如何在Chart.js中重新设置工具提示的格式？

Question

如何在Chart.js中重新设置工具提示的格式？该图表的x轴为时间，y轴为销售额，工具提示显示x和y的数据值。到目前为止，tooltip可以默认工作，但我想更改我们在tooltip中看到的值。我可以通过在'时间'中重新定义tooltipFormat字段来重新设​​置工具提示的时间格式。但是我没有发现y轴数据类似的东西。例如，显示“$ 1600”而不是“每日门票销售：1600”。
example tooltip format image

有谁能告诉我应该发生什么变化吗？

'custom'回调函数可以解决问题吗？这里是代码，谢谢！

var dates=data.linechart.dates; 
    var times=[]; 
    for (var i=0; i<dates.length; i++) { 
     times.push(moment(dates[i],'YYYY/MM/DD')); 
    } 
    // console.log(dates); 
    // console.log(times); 

    var salesData = { 
    labels: times, 

    datasets: [ 
     { 
      label: "Daily Ticket Sales", 
      fill: false, 
      lineTension: 0, 
      backgroundColor: "#fff", 
      borderColor: "rgba(255,88,20,0.4)", 
      borderCapStyle: 'butt', 
      borderDash: [], 
      borderDashOffset: 0.0, 
      borderJoinStyle: 'miter', 
      pointBorderColor: "rgba(255,88,20,0.4)", 
      pointBackgroundColor: "#fff", 
      pointBorderWidth: 1, 
      pointHoverRadius: 5, 
      pointHoverBackgroundColor: "rgba(255,88,20,0.4)", 
      pointHoverBorderColor: "rgba(220,220,220,1)", 
      pointHoverBorderWidth: 2, 
      pointRadius: 3, 
      pointHitRadius: 10, 
      data: data.linechart.sales, 
     } 
     ] 
    }; 


    var ctx = document.getElementById("daily_sale").getContext("2d"); 
    var myLineChart = new Chart(ctx, { 
     type: 'line', 
     data: salesData,   
     options: { 

      showLines: true, 
      responsive: true, 
      legend:{display:false}, 
      tooltips:{ 
       // backgroundColor:'rgba(0,255,0,0.8)', 
       custom: function(tooltip) { 

        // tooltip will be false if tooltip is not visible or should be hidden 
        if (!tooltip) { 
         return; 
        } 
        else{ 
        console.log(tooltip); 
        } 
       } 
      }, 
      scales: 
      { 
       xAxes: [{ 
        type: "time", 
        time: { 
         displayFormat:'MM/DD/YY', 
         tooltipFormat: 'MM/DD/YY', 
        //  unit: 'day', 
        } 
       }], 
       yAxes: [{ 
        ticks:{ userCallback: function(value, index, values) { 
               // $ sign and thousand seperators 
               return '$'+value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
              }, 
        }, 
       }], 
      }, 
     } 
    }); 

Answer 1

您可以在回调函数中自定义标签。

tooltips: { 
      callbacks: { 
         label: function(tooltipItem, data) { 
          return "Daily Ticket Sales: $ " + tooltipItem.yLabel; 
         }, 
        } 
      } 

Answer 2

有点晚，但也许@LeonF答案的伟大工程，没能充分为我与许多数据集和大批工作，所以如果有人需要它，在这里我离开了我的代码所以标签具有正确的标签和格式化值（我希望这可以帮助别人）：

var myChart = new Chart(ctx, { 
    type: 'line', 
    data: { 
     labels: _labels, 
     datasets: [...] 
    }, 
    options: { 
     scales: { 
      yAxes: [{ 
       ticks: { 
        beginAtZero: true, 
        stacked: false, 
        callback: function (label, index, labels) { 
         return '$' + label/1000000; 
        } 
       }, 
       scaleLabel: { 
        display: true, 
        labelString: 'Millones de pesos' 
       } 
      }] 
     }, 
     tooltips: { 
      callbacks: { 
       label: function (tti, data) { 
        // Here is the trick: the second argument has the dataset label 
        return '{0}: {1}'.Format(data.datasets[tti.datasetIndex].label, formatMoney(tti.yLabel)); 
       } 
      } 
     }, 
     title: { 
      display: true, 
      text: 'Avance global' 
     } 
    } 
}); 

我也留下了我的功能String.Format：

String.prototype.format = String.prototype.Format = function() { 
    var args = arguments; 
    return this.replace(/{(\d+)}/g, function (match, number) { 
     return typeof args[number] != 'undefined' ? args[number] : match; 
    }); 
}; 

和formatMoney：

function formatNumber(num) { 
    if (num == 'NaN') return '-'; 
    if (num == 'Infinity') return '∞'; 
    num = num.toString().replace(/\$|\,/g, ''); 
    if (isNaN(num)) 
     num = "0"; 
    sign = (num == (num = Math.abs(num))); 
    num = Math.floor(num * 100 + 0.50000000001); 
    cents = num % 100; 
    num = Math.floor(num/100).toString(); 
    if (cents < 10) 
     cents = "0" + cents; 
    for (var i = 0; i < Math.floor((num.length - (1 + i))/3) ; i++) 
     num = num.substring(0, num.length - (4 * i + 3)) + ',' + num.substring(num.length - (4 * i + 3)); 
    return (((sign) ? '' : '-') + num + '.' + cents); 
} 
function formatMoney(num) { 
    return '$' + formatNumber(num); 
}