数值显示

Chart.js 是一个流行的 JavaScript 图表库，用于在网页上显示各种类型的图表。要使用 Chart.js 显示数值，首先需要在 HTML 中引入 Chart.js 的脚本和样式表。可以在 JavaScript 中创建一个图表实例，并配置数据和选项以显示所需的数值。可以创建一个柱状图、折线图或饼图等，将数值作为数据集传递给图表实例。通过调整图表的配置选项，可以自定义图表的外观和行为，以满足特定的需求。

使用 Chart.js 显示对应数值，你可以通过在图表配置中设置 tooltip 和 onClick 事件来实现。，，``javascript，const ctx = document.getElementById('myChart').getContext('2d');，const myChart = new Chart(ctx, {， type: 'bar',， data: {， labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],， datasets: [{， label: '# of Votes',， data: [12, 19, 3, 5, 2, 3],， backgroundColor: [， 'rgba(255, 99, 132, 0.2)',， 'rgba(54, 162, 235, 0.2)',， 'rgba(255, 206, 86, 0.2)',， 'rgba(75, 192, 192, 0.2)',， 'rgba(153, 102, 255, 0.2)',， 'rgba(255, 159, 64, 0.2)'， ],， borderColor: [， 'rgba(255, 99, 132, 1)',， 'rgba(54, 162, 235, 1)',， 'rgba(255, 206, 86, 1)',， 'rgba(75, 192, 192, 1)',， 'rgba(153, 102, 255, 1)',， 'rgba(255, 159, 64, 1)'， ],， borderWidth: 1， }]， },， options: {， scales: {， y: {， beginAtZero: true， }， },， plugins: {， tooltip: {， callbacks: {， label: function(context) {， return context.dataset.label + ': ' + context.raw;， }， }， }， }， }，});，，myChart.canvas.onclick = function(evt) {， const activePoints = myChart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true);， if (activePoints.length ˃ 0) {， const firstPoint = activePoints[0];， const label = myChart.data.labels[firstPoint.index];， const value = myChart.data.datasets[firstPoint.datasetIndex].data[firstPoint.index];， alert(Label: ${label}, Value: ${value});， }，};，``