ChartJS中的“内联”标签

Question

是否可以在ChartJS的水平条之间呈现带有“内联”标签的图表？

Answer 1

您可以为此使用chartjs-plugin-datalabels，当在任何类型的图表的数据上显示标签并且高度可定制时，这非常有用。

  

请注意，这需要Chart.js 2.7.0或更高版本。

通过将其包含在图表plugins的{​​{1}}键下来使用它，如下面的以下解决方案所示。

---

解决方案＃1。

以下配置将在每个栏的options上显示您的标签。参见working example。

top center

但是，这与您提供的屏幕截图并不完全一样，

解决方案2。

这是我可以建议复制您想要的确切行为的一种解决方法。

  

  

• var options = { plugins: { datalabels: { // use the formatter function to customize the labels displayed formatter: function(value, context) { return context.chart.data.labels[context.dataIndex]; }, align: "top", anchor: "center", offset: 25, padding: -2, clip: true, font: { size: "16", weight: "bold" } } } }; 和anchor: 'start'：这会将您的数据标签放在顶部，并保持对齐

  

• 通过将align: -60设置为scale.ticks.beginAtZero

，使图表从零开始   

• true：将标签拉离锚点的距离（以像素为单位）

  

• offset: 25：使用可写脚本的选项根据标签的近似尺寸动态计算左侧填充，因为添加特定填充仅在标签宽度不变且宽度不变时才有效不是这种情况

  

有关配置的详细概述，请参见working example。

  

此解决方案可以工作，但是绝对不理想，因为   这些标签的位置可能会随标签尺寸，条形的变化而变化   厚度和图表尺寸。