时间戳

首页 > 解决方案 > Chart.js 添加带有现金流的工具提示

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,
    }
  }
});

我该怎么做呢？

标签： javascriptchart.js

解决方案

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

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

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

var cashFlow = [86.84, -36.36];

var timeOfPaymentChart = new Chart('myChart', {
  type: 'bar',
  data: {
    labels: ['MultiSafePay', 'Koll'],
    datasets: [{
      label: 'Days between invoice and payment ',
      data: [38, 22],
      backgroundColor: '#FFFFFF',
      borderWidth: 1,
      borderColor: 'white',
      hoverBorderWidth: 3,
      hoverBorderColor: 'white'
    }],
  },
  options: {
    scales: {
      xAxes: [{
        ticks: {
          fontColor: '#FFFFFF',
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true,
          fontColor: '#FFFFFF',
        }
      }]
    },
    tooltips: {
      callbacks: {
        footer: tooltipItem => 'Cashflow: ' + cashFlow[tooltipItem[0].index]
      }
    },
    legend: {
      display: false,
    }
  }
});
body {
  background: lightblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>

推荐阅读