Vue-Charts 标签数字到条形图的一侧

Question

我正在使用带有 vue-charts 的 Nuxt 应用程序。我有一个条形图，我想看看是否有办法回调图表旁边的数字。有些像这样

我的条形图选项现在看起来像这样。

barLostDollarChartOptions: {
    responsive: true,
    maintainAspectRatio: false,
    legend: {
      display: false,
    },
    title: {
      display: true,
      text: 'Daily NP Opportunity Costs'
    },
    scales: {
      yAxes: [{
        //Sets the Max value after re-rendering chart
        beforeFit: function (scale){
          let maxValue = 0
          if (scale.chart.config && scale.chart.config.data && scale.chart.config.data.datasets) {
            scale.chart.config.data.datasets.forEach(dataset => {
              if (dataset && dataset.data) {
                dataset.data.forEach(value => {
                  if (value > maxValue) {
                    maxValue = value
                  }
                })
              }
            })
          }
          // After, set max option !!!
          scale.options.ticks.max = maxValue
        },
        // afterFit: function (scale){
        //   console.log('yAxes',scale)
        //   let arr = Object.values(scale.chart.config.data.datasets[0].data);
        //   let min = Math.min(...arr);
        //   let max = Math.max(...arr);
        //   maxValueArray.push(max)
        //   // console.log( `Min value: ${min}, max value: ${max}` );
        //
        // }
      }
      ],
      xAxes: [{
        ticks:{
          callback: function(value, index, values) {
            if(parseInt(value) >= 1000){
              // console.log(value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","))
              return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
            } else {
              return '$' + value;
            }
          },
        },
      }]
    }
      },

但我想看看是否有办法可以回叫号码并将其呈现在栏旁边？有什么想法吗？

Answer 1

您可以为此使用 datalabels plugin：

Chart.plugins.register(ChartDataLabels);

var options = {
  type: 'horizontalBar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: 'orange'
    }]
  },
  options: {
    plugins: {
      datalabels: {
        anchor: 'end',
        align: 'end',
        formatter: (val) => ('$' + val)
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/1.0.0/chartjs-plugin-datalabels.js"></script>
</body>

Vue-Charts 标签数字到条形图的一侧

Vue-Charts label numbers to the side of a bar chart

vue.js

chart.js

nuxt.js

chartjs-2.6.0

vue-chartjs