chart.js-datalabels-plugins不起作用

Question

我正在尝试使用chartjs-datalabels-plugin在图表上显示值。但我无法在jsfiddle

上使其发挥作用

这是我的代码

<div class="graph">
  <div class="chart-legend">

  </div>
  <div class="chart">
    <canvas id="myChart" height = 60></canvas>
  </div>
</div>

我在jsfiddle中导入chartjs-datalabels-plugin然后在选项中我将display选项设置为true。但图表中没有显示任何值。

var ctx = $('#myChart');

ctx.height(100);
var myChart = new Chart(ctx, {
    ....
    maintainAspectRatio: false,
    options: {
        plugins: {
            datalabels: {
                        color: 'black',
                        display: true,
                        font: {
                            weight: 'bold'
                        },
                        formatter: Math.round
                    }
        },
        legend: {
            display: false
        },
        maintainAspectRatio: false,

        scales: {
            yAxes: [{
                stacked: true,

                gridLines: {
                    display: false,
                    drawBorder: false,

                },
                ticks: {
                    beginAtZero: true,
                },
                barThickness: 9

            }],
            xAxes: [{
                stacked: true,

                gridLines: {
                    display: false,
                    drawBorder: false,

                },
                ticks: {
                    beginAtZero: true,
                    suggestedMax: 100,
                    display: false

                },
                barThickness: 9

            }]
        }
    }
});

Answer 1

Datalabels plugin需要Chart.js 2.7.0或更高版本。

在你的小提琴中你使用了2.4.0版本。

＆＃13;

＆＃13;

var ctx = $('#myChart');
ctx.height(100);
var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        height: 200,
        labels: ["Red"],
        datasets: [{
                label: '# of Votes',
                data: [12],
                backgroundColor: [
                    '#F4B266',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderWidth: 1
            },
            {
                label: '# of Votes',
                data: [18],
                backgroundColor: [
                    '#AEB7B2',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderWidth: 1
            }
        ]
    },
    maintainAspectRatio: false,
    options: {
        plugins: {
            datalabels: {
						color: 'black',
						display: function(context) {
							return context.dataset.data[context.dataIndex] > 15;
						},
						font: {
							weight: 'bold'
						},
						formatter: Math.round
					}
        },
        legend: {
            display: false
        },
        maintainAspectRatio: false,

        scales: {
            yAxes: [{
                stacked: true,

                gridLines: {
                    display: false,
                    drawBorder: false,

                },
                ticks: {
                    beginAtZero: true,
                },
                barThickness: 9

            }],
            xAxes: [{
                stacked: true,

                gridLines: {
                    display: false,
                    drawBorder: false,

                },
                ticks: {
                    beginAtZero: true,
                    suggestedMax: 100,
                    display: false

                },
                barThickness: 9

            }]
        }
    }
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.2.0/dist/chartjs-plugin-datalabels.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="graph">
  <div class="chart-legend">
  </div>
  <div class="chart">
    <canvas id="myChart" height = 60></canvas>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;