画像のように列の後にチャートの上部にラベルを適用する必要があります(テキスト「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>
回答 1 件
関連記事
- Chartjs:データセットのデータを特定のチャートラベルにバインドする
- ChartJSを使用して棒グラフのラベルを明確に表示する方法は?
- 折れ線グラフ上の2つの異なるx軸ラベル、chartjsは反応します
- 折れ線グラフのラベル:Ng2Charts:ChartJS
- 一部のデータポイントについて、折れ線グラフのラベルとしてY値を追加します。
- WinFormsドーナツおよび円グラフは、背景要素の色のプロパティにラベルを付けます
- 折れ線グラフはタイプtime chartjsでは機能しません
- nvd3チャートのラベルにイベントハンドラーをアタッチします
- chartjsドーナツグラフの境界線とツールチップをカスタマイズする方法
私はチャートjsとjavascriptが初めてです。 同じ問題に直面したため、2つの値の合計をラベルに表示したかったため、 以下と同じ解決策があります。 多分それはあなたを助けることができます。 見てみな: http://www.chartjs.org/samples/latest/tooltips/callbacks.html