Chartjs 2でチャートバーの上にラベルを追加する方法

bugfix> javascript > 投稿

画像のように列の後にチャートの上部にラベルを適用する必要があります（テキスト「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>

javascript

chart.js

回答 1 件

  • 私はチャートjsとjavascriptが初めてです。  同じ問題に直面したため、2つの値の合計をラベルに表示したかったため、 以下と同じ解決策があります。 多分それはあなたを助けることができます。 見てみな： 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
            },

あなたの答え

関連記事