2016-05-23 11 views
3

Chart.jsでツールチップを再フォーマットする方法は?チャートはx軸を時間軸、y軸を売上量、ツールチップをx軸とy軸の両方に表示します。これまでのところ、ツールチップはデフォルトで動作しますが、ツールチップに表示される値を変更したいと考えています。 tooltipFormatフィールドを 'time'に再定義することで、ツールチップの時刻を再フォーマットすることができます。しかし、私はy軸のデータには似たようなものは見つけられません。たとえば、 "Daily Ticket Sales:1600"の代わりに "$ 1600"を表示します。
example tooltip format imageChart.jsでツールチップを再フォーマットする方法は?

どこの人がその変更を行うべきか教えてください。

「カスタム」コールバック関数はここで問題を解決できますか?コードはありがとう!

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, ","); 
              }, 
        }, 
       }], 
      }, 
     } 
    }); 

答えて

2

コールバック関数でラベルをカスタマイズできます。

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

ありがとうございます、それは魔法のように機能します! –

1

、おそらく@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 '&#x221e;'; 
    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); 
} 
関連する問題