ChartJS 我们可以在图表顶部的数值酒吧,?

s1ag04yj  于 2023-08-05  发布在  Chart.js
关注(0)|答案(1)|浏览(122)

x1c 0d1x的数据
用户需要直接知道值,而不是将鼠标悬停在其上。- 谢谢-谢谢

yquaqz18

yquaqz181#

可以使用chartjs-plugin-datalabels。标签的位置由图表选项中的以下定义指定。

plugins: {
  datalabels: {        
    anchor: 'end',
    align: 'end',
  }
}

字符串
请看下面的可运行代码片段。

const labels = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'K', 'L', 'M', 'N', 'O'];
const data = labels.map(l => Math.floor(Math.random() * 1000) + 1);
const sortedData = data.slice().sort((a, b) => a - b);
const backgroundColors = data.map(v => sortedData.indexOf(v) >= data.length - 3 ? 'red' : 'green');

Chart.register(ChartDataLabels);

new Chart('myChart', {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'K', 'L', 'M', 'N', 'O'],
    datasets: [{
      label: "My Dataset",
      data: data,
      backgroundColor: backgroundColors
    }]
  },
  options: {
    layout: {
      padding: {
        top: 30
      }
    },
    plugins: {
      legend: {
        display: false
      },
      datalabels: {
        anchor: 'end',
        align: 'end'
      }
    },
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
<canvas id="myChart" height="90"></canvas>

的数据

相关问题