条形图上的 Chart.js 标签

Question

我在一个项目中使用 Chart.js，因为它是 MIT 许可证，而不是 Highcharts 框架。在 highcharts 上可以轻松完成一件事，而 Charts.js 似乎无法做到这一点，即在条形图顶部添加标签，如下面的演示所示：

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

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

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

Answer 1

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

\n

\r\n

\r\n

var ctx2 = document.getElementById("stack-chart");\nvar stackChart1 = new Chart(ctx2, {\n  type: \'bar\',\n  options: {\n    scales: {\n      xAxes: [{\n\n        stacked: true,\n      }],\n      yAxes: [{\n\n        stacked: true,\n        ticks: {\n          beginAtZero: true\n        }\n      }]\n    },\n    legend: {\n      display: false,\n      labels: {\n        fontSize: 20,\n        fontColor: \'#595d6e\',\n      }\n    },\n    tooltips: {\n      enabled: false\n    },\n    plugins: {\n      datalabels: {\n        formatter: (value, ctx) => {\n          return;\n        },\n        color: \'#fff\',\n      }\n    }\n  },\n  data: {\n    labels: [\'\xe3\x85\x87\xe3\x85\x87\xeb\xa7\x88\xed\x8a\xb8\', \'\xe3\x85\x82\xe3\x85\x82\xed\x94\x84\xeb\x9d\xbc\xec\x9e\x90\', \'\xe3\x85\x88\xe3\x85\x88\xeb\x9e\x9c\xeb\x93\x9c\', \'\xe3\x85\x81\xe3\x85\x81\xeb\xa7\x88\xed\x8a\xb8\', \'\xe3\x84\xb4\xe3\x84\xb4\xed\x94\x8c\xeb\x9f\xac\xec\x8a\xa4\'],\n    datasets: [{\n      backgroundColor: "#5e63b4",\n      data: [5600, 5600, 10000, 4600, 5600]\n    }, {\n      backgroundColor: "#e11738",\n      data: [6000, 3000, 1600, 6400, 2300]\n    }]\n  },\n\n});

\r\n

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

\r\n

\r\n

\r\n

\n