1
我設法創建了一個包含多個數據集的Chart.js線條圖。但是,如何修改工具提示,以便當我將鼠標懸停在某個點上時,數據集的標籤以及英鎊符號都會顯示出來?在Chart.js線條圖中顯示數據集標籤
例如,從我的截圖,我想顯示:
31/10/2015
(label) - £100.00
(label) - £240.00
(label) - £150.00
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