时间戳

首页 > 解决方案 > ChartJS 中的“内联”标签

javascript - ChartJS 中的“内联”标签

问题描述

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

在此处输入图像描述

标签： javascriptchartschart.jsreact-chartjs

解决方案

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

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

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

解决方案#1。

top center下面的配置将在每个栏上显示您的标签。请参阅工作示例。

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"
      }
    }
  }
};

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

解决方案#2。

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

  • anchor: 'start'和align: -60：这将使您的数据标签位于顶部，左对齐

  • scale.ticks.beginAtZero通过设置为使您的图表从零开始true

  • offset: 25: 将标签拉离锚点的距离（以像素为单位）

  • padding: function() {}：使用脚本选项根据标签近似大小动态计算左侧填充，因为添加特定填充仅在标签具有相同宽度且不会改变的情况下才有效，这不是这种情况

有关配置的详细概述，请参阅工作示例。

此解决方案可行，但绝对不理想，因为这些标签的位置可能会根据标签大小、条形厚度和图表大小而变化。

推荐阅读