如何将 chart.js - Javascript 的值显示为千

Question

我正在使用 chart.js，我想在 K 中以千格式显示值。
我用谷歌搜索了很多并找到了这些答案：
我尝试了那里发布的每个答案，但对我没有任何帮助。我的代码：

class Analytics {
    constructor() {
        this.months = [
            'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
        ]

        this.requestGraphData()
    }

    async requestGraphData() {
        try {
            const response = await fetch("https://duklrtest.ml/API/analyticsGraph")
            const body = await response.json()
            const data = body.analyticsGraph

            this.initChart(data)
        } catch (error) {
            console.error(error)
        }
    }

    initChart(data) {
        const canvas = $('canvas')
        let datasetsArray = []

        const datasets = data.forEach(item => {
            const { jan, feb, mar, sept, nov, dec, tagName } = item
            datasetsArray.push({
                label: tagName,
                data: [jan, feb, mar, 0, 0, 0, 0, 0, sept, 0, nov, dec],
                backgroundColor: [
                    '#79939f',
                ],
                borderColor: [
                    '#79939f',
                ],
                borderWidth: 1
            })
        })
    
        const graphChart = new Chart(canvas, {
            type: 'line',
            data: {
                labels: this.months,
                datasets: datasetsArray
            },
            options: {
                plugins: {
                    datalabels: {
                        formatter: function(context) {
                            return context + "k";
                        }
                    },
                }
            }
        })
    }
}
const analytics = new Analytics

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>

<canvas></canvas>

这是我要附加的屏幕截图 K:

有人可以帮忙解决这个问题吗？

Answer 1

要使用数据标签插件，您必须包含它，您不能只传递配置并期望它工作。对于报价，您可以使用回调

Chart.register(ChartDataLabels)

class Analytics {
  constructor() {
    this.months = [
      'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
    ]

    this.requestGraphData()
  }

  async requestGraphData() {
    try {
      const response = await fetch("https://duklrtest.ml/API/analyticsGraph")
      const body = await response.json()
      const data = body.analyticsGraph

      this.initChart(data)
    } catch (error) {
      console.error(error)
    }
  }

  initChart(data) {
    const canvas = $('canvas')
    let datasetsArray = []

    const datasets = data.forEach(item => {
      const {
        jan,
        feb,
        mar,
        sept,
        nov,
        dec,
        tagName
      } = item
      datasetsArray.push({
        label: tagName,
        data: [jan, feb, mar, 0, 0, 0, 0, 0, sept, 0, nov, dec],
        backgroundColor: [
          '#79939f',
        ],
        borderColor: [
          '#79939f',
        ],
        borderWidth: 1
      })
    })

    const graphChart = new Chart(canvas, {
      type: 'line',
      data: {
        labels: this.months,
        datasets: datasetsArray
      },
      options: {
        scales: {
          y: {
            ticks: {
              callback: v => `${v}K`
            }
          }
        },
        plugins: {
          tooltip: {
            callbacks: {
              label: (ctx) => `${ctx.dataset.label}: ${ctx.formattedValue}K`
            }
          },
          datalabels: {
            formatter: function(context) {
              return context + "k";
            }
          },
        }
      }
    })
  }
}
const analytics = new Analytics

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>

<canvas></canvas>

如何将 chart.js - Javascript 的值显示为千

How to display k as thousand for the values of chart.js - Javascript

javascript

charts

bar-chart

chart.js