Question

我需要在图表顶部的图表顶部应用标签，就像图像一样（除了文本'Resultadomês'之外的数字）：

请帮忙吗？

页面低于标题（标签需要在图例之前）。我在下面的页面中暂时提供了一个HTML / CSS解决方案，但我正在等待真正的解决方案：

http://www.pdagencia.com.br/porto/pages/10.3%20-%20consultar-dados-bancarios-01_v2.html#tab3

window.onload = function() {
  var ctx = document.getElementById('ps-chart').getContext('2d');
  var data = {
    labels: ["Jan/18", "Fev/18", "Mar/18", "Abr/18", "Mai/18", "Jun/18", "Jul/18", "Ago/18", "Set/18", "Out/18", "Nov/18", "Dez/18"],
    datasets: [{
        label: "Entradas",
        data: [650, 590, 800, 810, 560, 550, 400, 800, 810, 560, 550, 400],
        backgroundColor: '#33bfff'
      },
      {
        label: "Saídas",
        data: [-280, -480, -400, -190, -860, -270, -900, -400, -190, -860, -270, -900],
        backgroundColor: '#E75A5B'
      }
    ]
  }
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
      responsive: false,
      plugins: {
        datalabels: {
          formatter: function(value, context) {
            return context.dataset.data[context.dataIndex].toLocaleString('pt-BR', {
              style: 'currency',
              currency: 'BRL'
            });
          }
        }
      },
      legend: {
        display: true,
      },
      tooltips: {
        "enabled": false
      },
      scales: {
        yAxes: [{
          display: false,
          ticks: {
            display: false
          }
        }],
        xAxes: [{
          stacked: true,
          barPercentage: 1.2,
          gridLines: {
            display: false
          }
        }]
      }
    }
  });
}

<script src="https://github.com/chartjs/Chart.js/releases/download/v2.7.2/Chart.bundle.min.js"></script>
<script src="https://github.com/chartjs/chartjs-plugin-datalabels/releases/download/v0.3.0/chartjs-plugin-datalabels.min.js"></script>


<canvas id="ps-chart" style="width:100%"></canvas>

Answer 1

我是图表JS和JavaScript的新手。面对相同的问题，我想在标签中显示两个值的总和，我有一些相同的解决方案，如下所示。也许可以帮到您。一探究竟： http://www.chartjs.org/samples/latest/tooltips/callbacks.html

      tooltips: {
                mode: 'index',
                callbacks: {
                    // Use the footer callback to display the sum of the items 
        showing in the tooltip
                    footer: function(tooltipItems, data) {
                        var sum = 0;

                        tooltipItems.forEach(function(tooltipItem) {
                            sum += data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                        });
                        return 'Sum: ' + sum;
                    },
                },
                footerFontStyle: 'normal'
            },
            hover: {
                mode: 'index',
                intersect: true
            },

如何使用Chart.js 2

1 个答案: