2015-12-24 93 views
1

我設法創建了一個包含多個數據集的Chart.js線條圖。但是,如何修改工具提示,以便當我將鼠標懸停在某個點上時,數據集的標籤以及英鎊符號都會顯示出來?在Chart.js線條圖中顯示數據集標籤

例如,從我的截圖,我想顯示:

31/10/2015 
(label) - £100.00 
(label) - £240.00 
(label) - £150.00 

enter image description here

javascript代碼:

<script type="text/javascript"> 

gon.balances.reverse(); 
var balancesSortByAccId = gon.balancesSortByAccId; 

var data = { 
    labels: [], 
    datasets: [] 
}; 

//loop through all accounts to generate datasets 
for(var account in gon.balancesSortByAccId){ 
    var balances = []; 
    var dates = []; 

    var accountData = gon.balancesSortByAccId[account]; 

    for (var i in accountData) { 
    balances.push(parseFloat(accountData[i].balance).toFixed(2)); 
    dates.push(convertDate(accountData[i].date)); 

    for (var date in dates) 
     if (data.labels.indexOf(dates[date]) <= -1) 
     data.labels.push(dates[date]); 
    } 

    var colour = getRandomColor(); 

    var chartjs_balances =   { 
       label: account, 
       fillColor: "rgba(220,220,220,0.2)", 
       strokeColor: colour, 
       pointColor: colour, 
       pointStrokeColor: colour, 
       pointHighlightFill: "#fff", 
       pointHighlightStroke: "rgba(220,220,220,1)", 
       data: balances 
      }; 


    data.datasets.push(chartjs_balances); 
} 

var options = { 
    responsive: true, 
}; 

//draw graph 
var ctx = document.getElementById("history_canvas").getContext("2d"); 
var myLineChart = new Chart(ctx).Line(data, options); 

//convert date to dd/mm/yyyy format 
function convertDate(inputFormat) { 
    function pad(s) { return (s < 10) ? '0' + s : s; } 
    var d = new Date(inputFormat); 
    return [pad(d.getDate()), pad(d.getMonth()+1), d.getFullYear()].join('/'); 
} 

//return random color for each dataset 
function getRandomColor() { 
    var letters = 'ABCDEF'.split(''); 
    var color = '#'; 
    for (var i = 0; i < 6; i++) { 
     color += letters[Math.floor(Math.random() * 16)]; 
    } 
    return color; 
} 

UPDATE:

我已經成功地顯示具有下列更新£符號:

var options = { 
    responsive: true, 
    multiTooltipTemplate: "<%%=label%>: £<%%= value %>" 
}; 

但是,輸出是下面並沒有完全如何我想它,因爲它顯示的日期,而不是賬戶標籤:

31/10/2015 
31/10/2015 - £100.00 
31/10/2015 - £240.00 
31/10/2015 - £150.00 

回答

1

我設法用下面來解決此問題:

var options = { 
    responsive: true, 
    multiTooltipTemplate: "<%%=datasetLabel%>: £<%%= value %>", 
};