简体   繁体   English

在Chart.js折线图中显示数据集标签

[英]Displaying dataset labels in Chart.js line graph

I've managed to create a Chart.js line graph that contains multiple datasets. 我设法创建了一个包含多个数据集的Chart.js折线图。 However, how can I modify the tooltip such that when I hover over a point, the label of the datasets is displayed as well as the £ symbol? 但是,如何修改工具提示,以便当我将鼠标悬停在某个点上时,会显示数据集的标签以及£符号?

For example, from my screenshot, I'd like to display: 例如,从我的屏幕截图中,我想显示:

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

在此处输入图片说明

javascript code: 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 = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

UPDATE: 更新:

I've managed to display the £ symbol with the following update: 我设法通过以下更新显示了£符号:

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

However, the output of that is the following and not completely how I want it since it displays the date instead of the account label: 但是,其输出如下,而不是我想要的那样,因为它显示日期而不是帐户标签:

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

I managed to resolve this with the following: 我设法解决以下问题:

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM