x1c 0d1x的数据用户需要直接知道值,而不是将鼠标悬停在其上。- 谢谢-谢谢
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>
的数据
1条答案
按热度按时间yquaqz181#
可以使用chartjs-plugin-datalabels。标签的位置由图表选项中的以下定义指定。
字符串
请看下面的可运行代码片段。
的数据