Chart.js label 上条

Question

由于其 MIT 许可证而不是 Highcharts 框架，我在项目中使用 chart.js。 在 highcharts 上可以轻松完成一件事，我似乎无法使用 Charts.js，它在我的条形图顶部有标签，例如在下面的演示中：

在 highcharts 文档中，此条形图的每个堆栈上的这些数字以这种方式配置：

plotOptions: {
        series: {
            dataLabels: {
                enabled: true
            }
        }
    

我已经广泛阅读了Chart.js 文档，但没有找到实现相同可视化的方法，也没有找到论坛中的示例。 有没有办法使用 Chart.js 条形图在条形图上显示数字？

Answer 1

使用 Chart.js 可以做到这一点。 但是，您需要datalabels插件。 在这个脚本中，您可以看到它是如何实现的。 使用此插件， 'bar'类型的图表将自动将标签添加到中心。

 var ctx2 = document.getElementById("stack-chart"); var stackChart1 = new Chart(ctx2, { type: 'bar', options: { scales: { xAxes: [{ stacked: true, }], yAxes: [{ stacked: true, ticks: { beginAtZero: true } }] }, legend: { display: false, labels: { fontSize: 20, fontColor: '#595d6e', } }, tooltips: { enabled: false }, plugins: { datalabels: { formatter: (value, ctx) => { return; }, color: '#fff', } } }, data: { labels: ['ㅇㅇ마트', 'ㅂㅂ프라자', 'ㅈㅈ랜드', 'ㅁㅁ마트', 'ㄴㄴ플러스'], datasets: [{ backgroundColor: "#5e63b4", data: [5600, 5600, 10000, 4600, 5600] }, { backgroundColor: "#e11738", data: [6000, 3000, 1600, 6400, 2300] }] }, });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/0.7.0/chartjs-plugin-datalabels.min.js"></script> <canvas id="stack-chart" width="1360" height="450"></canvas>