Javascript Chart.js使用现金流添加工具提示

我正在尝试制作每个客户付款时间的chart.js图表。在每个栏的工具提示中，我想包括现金流百分比

现在我在一个条上获得所有现金流值，我想为每个条指定一个值：

我将这些百分比保存在一个数组中，如下所示：

var cashFlow = [86.84, -36.36];

代码图：

var timeOfPaymentChart = new Chart(timeOfPaymentChart, {
  type: 'bar',
  data: {
    labels: customers,
    datasets: [{
      label: 'Days between invoice and payment ',
      data: paymentDays,
      backgroundColor: '#FFFFFF',
      borderWidth: 1,
      borderColor: 'white',
      hoverBorderWidth: 3,
      hoverBorderColor: 'white'
    }],
  },
  options: {
    scales: {
      xAxes: [{
        ticks: {
          fontColor: '#FFFFFF',
        }
      }],
      yAxes: [{
        ticks: {
          fontColor: '#FFFFFF',
        }
      }]
    },
    tooltips: {
      callbacks: {
        footer: function(tooltipItem, data) {
          var cf = cashFlow;
          return "Cashflow: " + cf;
        }
      }
    },
    legend: {
      display: false,
    }
  }
});

---

如何执行此操作？

按如下所示更改tooltips.callbacks.footer函数，它将按预期工作

tooltips: {
  callbacks: {
    footer: tooltipItem => 'Cashflow: ' + cashFlow[tooltipItem[0].index]
  }
},

请看一看您修改后的可运行代码，看看它是如何工作的

var现金流=[86.84，-36.36]；
var timeOfPaymentChart=新图表（'myChart'{
类型：'bar'，
数据：{
标签：['MultiSafePay'，'Koll']，
数据集：[{
标签：“发票和付款之间的天数”，
数据：[38,22]，
背景颜色：“#FFFFFF”，
边框宽度：1，
边框颜色：“白色”，
悬停边界宽度：3，
悬停边框颜色：“白色”
}],
},
选项：{
比例：{
xAxes：[{
滴答声：{
fontColor:“#FFFFFF”，
}
}],
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的，
fontColor:“#FFFFFF”，
}
}]
},
工具提示：{
回调：{
页脚：tooltipItem=>“现金流：”+现金流[tooltipItem[0]。索引]
}
},
图例：{
显示：假，
}
}
});
正文{
背景：浅蓝色；
}