javascript - 如何在图表js中永久写入小div中每个项目符号的值

Question

我有这个数据

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

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

这是我到目前为止得到的代码的jsfiddle 。

Answer 1

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

首先你必须注册插件，然后你可以在options.plugins.datalabels.

如果除了值之外，还想显示相应的标签或者一些额外的文字，就需要定义一个formatter函数。

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

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>