chart.js 相关问题

我有这个非常有用的图表，但我的问题是客户想要显示百分比标签。我在下面附上了我想要的图片： 我有这个非常有用的图表，但我的问题是客户想要显示百分比标签。 我在下面附上了我想要的图片： <a href="https://i.sstatic.net/2QKgUYM6.jpg" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvMlFLZ1VZTTYuanBn" alt="enter image description here"/></a> <pre><code><html> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> <body> <canvas id="myChart" style="width:100%;max-width:600px"></canvas> <script> const xValues = ["Italy", "France", "Spain", "USA", "Argentina"]; const yValues = [55, 49, 44, 24, 15]; const barColors = ["red", "green","blue","orange","brown"]; new Chart("myChart", { type: "bar", data: { labels: xValues, datasets: [{ backgroundColor: barColors, data: yValues }] }, options: { legend: {display: false}, title: { display: true, text: "World Wine Production 2018" } } }); </script> </body> </html> </code></pre> </question> <answer tick="false" vote="0"> 要在每个条形顶部显示百分比，您可以在图表中使用数据标签插件。它有助于在每个条形的顶部添加 Y 轴实际计数。甚至，您也可以修改它的行为。 给出一个示例链接，从中您也可以更好地理解它。<a href="https://www.youtube.com/watch?v=bwhcZeZpfd8&list=PLc1g3vwxhg1W4bPr3UrM_7xfzJr1O08cZ" rel="nofollow noreferrer">[视频链接]</a> </answer> <answer tick="false" vote="0"> 在图表动画完全渲染后，您可以使用 <pre><code>onComplete</code></pre> 钩子来绘制/写入这些值。然后使用 <pre><code>ctx.fillText()</code></pre> 自定义您喜欢的方式。 <pre><code>const xValues = ["Italy", "France", "Spain", "USA", "Argentina"]; const yValues = [55, 49, 44, 24, 15]; const barColors = ["red", "green","blue","orange","brown"]; const total = yValues.reduce((acc, val) => acc + val, 0); new Chart("myChart", { type: "bar", data: { labels: xValues, datasets: [{ backgroundColor: barColors, data: yValues }] }, options: { legend: {display: false}, title: { display: true, text: "World Wine Production 2018" }, animation: { onComplete: function () { const ctx = this.chart.ctx; ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily); ctx.fillStyle = "red"; ctx.textAlign = 'center'; ctx.textBaseline = 'bottom'; this.data.datasets.forEach(function (dataset) { for (let i = 0; i < dataset.data.length; i++) { const model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model; ctx.fillText(dataset.data[i], model.x, model.y - 5); ctx.fillText("%", model.x + 15, model.y - 5); } }); } } } }); </code></pre> 更新 我不知道我的理解是否正确。我假设您想向图表添加新数据...如果是这样，则需要更新数组。将数据与条形和颜色值相关联。我想这就是当客户想要添加一些东西时你的意思。然后更新 <pre><code>dataset</code></pre> 数组。 <pre><code>const xValues = ["Italy", "France", "Spain", "USA", "Argentina", "New1", "New2"]; const yValues = [55, 49, 44, 24, 15, 12, 99]; const barColors = ["red", "green","blue","orange","brown", "bronze", "purple"]; const total = yValues.reduce((acc, val) => acc + val, 0); new Chart("myChart", { type: "bar", data: { labels: xValues, datasets: [{ backgroundColor: barColors, data: yValues }] }, options: { legend: {display: false}, title: { display: true, text: "World Wine Production 2018" }, animation: { onComplete: function () { const ctx = this.chart.ctx; ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily); ctx.fillStyle = "red"; ctx.textAlign = 'center'; ctx.textBaseline = 'bottom'; this.data.datasets.forEach(function (dataset) { for (let i = 0; i < dataset.data.length; i++) { const model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model; ctx.fillText(dataset.data[i], model.x, model.y - 5); ctx.fillText("%", model.x + 15, model.y - 5); } }); } } } }); </code></pre> <a href="https://cdpn.io/pen/debug/QWRKMNX?authentication_hash=xnMabpeVanRr" rel="nofollow noreferrer">https://cdpn.io/pen/debug/QWRKMNX?authentication_hash=xnMabpeVanRr</a> </answer> </body></html>

javascript chart.js

回答 0 投票 0

尝试使用chart.js时“找不到名称Chart”

我在图表js方面遇到了一个非常烦人的问题，我已经被困了好几天了，我已经尝试了几乎所有的方法，但还无法弄清楚。问题是，我使用的是简单的 TypeScript 环境...

javascript html typescript chart.js

回答 1 投票 0

“插件”无法实现图表选项中的“剪切”

我的图表对象定义如下： this.chart = new Chart("myChart", { 类型：'甜甜圈'，数据： { 数据集：[ { 标签：标签数据， ...

angular typescript chart.js

回答 1 投票 0

Chart.js 在堆叠栏中显示状态随时间的变化

我的数据库中有许多记录，其状态更改已经过审核。我正在提取这些数据以显示在 Chart.js 水平条形图中，以可视化每条记录的持续时间......