如何在图表 js 中永久地以小 div 的形式在每个项目符号上写值

Question

我有这个数据

chartLabels = ['2018', '2019', '2020', 'TTM',]
priceToSaleRatioData = [3.37, 5.73, 1.88, 4.6,]

我希望它显示在我的折线图中的每个项目符号上但是它应该永久地写在某个框中。

这是我的 jsfiddle，其中包含我目前获得的代码。

Answer 1

您可以使用 chartjs-plugin-datalabels 插件。

首先，您必须 register 插件，然后您可以在 options.plugins.datalabels.

中定义所需的选项

If beside the value, you also want to display the corresponding label or some additional text, you need to define a formatter function.

请查看下面的可运行代码，看看它是如何工作的。

const chartLabels = ['2018', '2019', '2020', 'TTM'];
const priceToSaleRatioData = [3.37, 5.73, 1.88, 4.6];

Chart.register(ChartDataLabels);
new Chart('chart', {
  type: 'line',
  data: {
    labels: chartLabels,
    datasets: [{
      label: 'My Dataset',
      data: priceToSaleRatioData,
    }]
  },
  options: {
    plugins: {
      datalabels: {
        color: 'blue',
        anchor: 'end',
        align: 'top',
        formatter: (v, ctx) => {
          let label = ctx.chart.data.labels[ctx.dataIndex];
          if (label != 'TTM') {
            label = 'year ' + label;
          }
          return label + ': ' + v;
        }
      }
    },
    scales: {
      y: {
        max: 8
      },
      x: {
        offset: true
      }
    }
  }
});

datalabels: {
  formatter: function(value, context) {
    return context.chart.data.labels[context.dataIndex];
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js"></script>
<canvas id="chart" height="100"></canvas>

如何在图表 js 中永久地以小 div 的形式在每个项目符号上写值

How to write the value over each bullet in small div permanently in chart js

javascript

charts

chart.js

jscharts