相关疑难解决方法(0)

我正在尝试使用Chart.js2中的圆环图显示一些数据.

我目前的图表如下所示:

我想要的输出必须显示另一个属性,即百分比,如下所示:

我已经阅读了文档,但我无法应对这一点,因为它非常通用,我是JavaScript的新手.

我的第一个图表的代码如下:

const renderCashCurrencyPie = (cashAnalysisBalances) => {
  if (cashAnalysisBalances) {
    const currenciesName = cashAnalysisBalances
    .map(curName => curName.currency);

    const availableCash = cashAnalysisBalances
    .map(avCash => avCash.availableCash);

    let currenciesCounter = 0;
    for (let i = 0; i < currenciesName.length; i += 1) {
      if (currenciesName[i] !== currenciesName[i + 1]) {
        currenciesCounter += 1;
      }
    }

    const currenciesData = {
      labels: currenciesName,
      datasets: [{
        data: availableCash,
        backgroundColor: [
          '#129CFF',
          '#0C6DB3',
          '#FF6384',
          '#00FFFF'
        ],
        hoverBackgroundColor: [
          '#FF6384',
          '#36A2EB',
          '#FFCE56',
          '#00FFFF'
        ] …

我一直在与Chart JS的文档进行斗争,试图找出当您将鼠标悬停在特定点上时如何修改折线图工具提示的内容.

基本上,我想在单个点悬停时在所有相同的垂直轴上显示值.我尝试过这样的事情:

tooltips: {
    callbacks: {
        label: function(tooltipItem, data){
            console.log(data);
            var html = "";
            for(var dataset in data.datasets){
                html += "<label>" + data.datasets[dataset].label + ": " + data.datasets[dataset].data[tooltipItem.index] + "%</label><br/>";
            }
            return html;
        }
    },
},

这适用于在每个数据集上循环并<label>Example: 0%<br/></label>为每个数据集附加的程度,但是当我返回该HTML时,工具提示会逐字地显示字符串:

<label>Example1: 1%</label><br/><label>Example2: 5%</label><br/> ...

而不是呈现正确的HTML:

Example1: 1%
Example2: 5%
...

现在,我知道Chart JS版本1.0有tooltipTemplate选项,但我似乎无法弄清楚是否有任何方法可以在tooltips.callbacks.label选项中返回HTML .有关于如何进行自定义工具提示的文档,如果我无法解决这个问题,我将最终使用它,但任何帮助将不胜感激.