chart.js 相关问题

如何使用ChartJS向下钻取图表？ [已关闭]

我很惊讶我几乎没有找到关于这个话题的信息。 我有一个 ChartJS 饼图，我想在单击饼图的一部分后深入查看它。 你会怎么做？

将 Chart.js 与 SvelteKit 结合使用

我正在尝试将 Chart.js 与 SvelteKit 一起使用。在开发模式下一切正常，但是当我尝试构建项目时出现以下错误。 目录导入'C:\目录 颂歌模块

使 Chart.js 饼图中的其中一个切片变厚？

是否可以使 Chart.js 圆环图的切片比其余切片更厚？ 例如，在这个 Stackblitz 演示中，是否可以使蓝色切片比紫色切片厚 25%

Chartjs 禁用悬停时的颜色变化，而不禁用工具提示

我一直在尝试在图表画布上悬停时禁用所有颜色更改，但我仍然无法在不禁用所有工具提示和其他交互的情况下删除所有颜色更改...

如何向使用 LWC 中的图表 js 库构建的图表添加数据标签

我需要将数据标签添加到我在lwc 中使用chartJs 构建的饼图。我尝试了在互联网上找到的许多方法，但没有找到任何解决方案。任何人请分享这一点。 我尝试过...

如何以 Angular 方式访问 ChartJS 图表

所以我想应用诸如chart.update()和chart.clear()之类的东西，但不知道如何用角度来做到这一点？我的 html 模板和 ts 文件是什么，以便能够访问这些图表

如何使用node js在pdf和excel中创建图表？

创建折线图的 JavaScript 函数： 函数 TyLyReport() { var lineChartData = { 标签：[“一月”，“二月”，“三月”]，

Chart.js 类似甜甜圈的雷达图（中心/空中心没有角度线）

我想在chart.js中制作一个中心为空的雷达图，如下所示： 因此，我希望使角度线（从中心开始的线）从 2 开始，中心成为白色的pe...

使用 C# 从 SQL 数据库动态更改图表数据

这是我的图表代码。 var ctx = document.getElementById("myChart"); var myChart = 新图表(ct...</desc> <question vote="0"> <p>这是我的图表代码。</p> <p></p> <pre><code>&lt;!-- Graphs --&gt; &lt;script src=&#34;../Scripts/Chart.min.js&#34;&gt;&lt;/script&gt; &lt;script&gt; var ctx = document.getElementById(&#34;myChart&#34;); var myChart = new Chart(ctx, { type: &#39;line&#39;, data: { labels: [&#34;Sunday&#34;, &#34;Monday&#34;, &#34;Tuesday&#34;, &#34;Wednesday&#34;, &#34;Thursday&#34;, &#34;Friday&#34;, &#34;Saturday&#34;], datasets: [{ data: [1, 6, 2, 5, 9, 5, 6], label: &#34;Issues Resolved&#34;, lineTension: 0, backgroundColor: &#39;transparent&#39;, borderColor: &#39;#007bff&#39;, borderWidth: 4, pointBackgroundColor: &#39;#007bff&#39; }, { data: [8, 5, 8, 6, 0, 2, 2], label: &#34;Issues Raised&#34;, lineTension: 0, backgroundColor: &#39;transparent&#39;, borderColor: &#39;#ff8400&#39;, borderWidth: 4, pointBackgroundColor: &#39;#ff8400&#39; }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: false } }] }, legend: { display: true }, title: { display: true, text: &#39;Issues Raised VS Issues Resolved&#39; } } }); &lt;/script&gt; </code></pre> <p>该图虽然工作正常，但却是静态的。我想问的是我是否可以动态更改 <pre><code>data</code></pre> （其中我始终有 2 个值，对于一周中的每一天）运行时从我的 .aspx.cs（将从我的 SQL 数据库获取此数据）中提出的问题和解决的问题）。如果是这样，怎么办？<pre> </pre>谢谢您的帮助。</p> <p> </p> </question>我遇到了类似的问题并找到了解决方案。此解决方案需要您使用 <answer tick="false" vote="1"><code>datasets</code><p>，我将让您自行实现对 SQL 数据库的访问。但希望这个解决方案也能帮助您！<pre> </pre>尝试在 .ASPX 文件中使用以下内容：</p> <p><code>using System.Web.Services;</code></p> <pre>然后在后端文件中添加以下方法：</pre> <p><code>&lt;!-- Graphs --&gt; &lt;script src=&#34;../Scripts/Chart.min.js&#34;&gt;&lt;/script&gt; &lt;script&gt; $(function () { $.ajax({ type: &#39;POST&#39;, dataType: &#39;json&#39;, contentType: &#39;application/json&#39;, url: &#39;BackendFileName.aspx/GetChartData&#39;, // change to your .aspx filename data: &#39;{}&#39;, success: function (response) { drawChart(response.d); }, error: function () { console.error(&#34;Error loading data! Please try again.&#34;); } }); }) function drawChart(dataValues) { var issuesResolved = []; var issuesRaised = []; for (var i = 0; i &lt; dataValues.length; i++) { issuesResolved[i] = dataValues[i].issuesResolved; issuesRaised[i] = dataValues[i].issuesRaised; } var ctx = document.getElementById(&#34;myChart&#34;); var myChart = new Chart(ctx, { type: &#39;line&#39;, data: { labels: [&#34;Sunday&#34;, &#34;Monday&#34;, &#34;Tuesday&#34;, &#34;Wednesday&#34;, &#34;Thursday&#34;, &#34;Friday&#34;, &#34;Saturday&#34;], datasets: [{ data: issuesResolved, label: &#34;Issues Resolved&#34;, lineTension: 0, backgroundColor: &#39;transparent&#39;, borderColor: &#39;#007bff&#39;, borderWidth: 4, pointBackgroundColor: &#39;#007bff&#39; }, { data: issuesRaised, label: &#34;Issues Raised&#34;, lineTension: 0, backgroundColor: &#39;transparent&#39;, borderColor: &#39;#ff8400&#39;, borderWidth: 4, pointBackgroundColor: &#39;#ff8400&#39; }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: false } }] }, legend: { display: true }, title: { display: true, text: &#39;Issues Raised VS Issues Resolved&#39; } } }); } &lt;/script&gt; </code></p> <pre> </pre> </answer>你当然可以。看一下文档<answer tick="false" vote="0">这里<p>，你只需要实现AJAX轮询来查看源数据集是否发生变化。 <a href="https://www.chartjs.org/docs/latest/developers/updates.html" rel="nofollow noreferrer"> </a> </p> </answer>添加隐藏字段：<answer tick="false" vote="0"> <p><code>// Arbitrary class to hold required data from SQL Database public class ChartDetails { public string IssuesResolved { get; set; } public string IssuesRaised { get; set; } public ChartDetails() { } } // Method that will be called by JQuery script [WebMethod] public static List&lt;ChartDetails&gt; GetChartData() { List&lt;ChartDetails&gt; dataList = new List&lt;ChartDetails&gt;(); // Access SQL Database Data // Assign SQL Data to List&lt;ChartDetails&gt; dataList return dataList; } </code></p> <pre>在图表脚本中添加：</pre> <p><code>&lt;asp:HiddenField ID=&#34;hdnLabels&#34; runat=&#34;server&#34; Value=&#34;&#34; /&gt; &lt;asp:HiddenField ID=&#34;hdnData&#34; runat=&#34;server&#34; Value=&#34;&#34; /&gt; </code></p> <pre>在代码后面：</pre> <p><code>labels: [&lt;%= hdnLabels.Value %&gt;], datasets: [ { data: [ &lt;%= hdnData.Value %&gt;], ... other options here, } ] </code></p> <pre>希望这有帮助...</pre> <p> </p> </answer>我相信你能做的是：<answer tick="false" vote="0"> <p> </p>在后面的代码中创建一个类级别字符串变量，用于保存序列化数组，例如 <ol><code> public void ShowChartData() string _data = &#34;&#34;; string _labels = &#34;&#34;; ......Loop your SqlDataReader .... .... while (dr.Read()) { _labels = _data + dr[&#34;DayOfWeek&#34;].ToString() + @&#34;,&#34;; _data = _data + dr[&#34;DayOfWeekValue&#34;].ToString() + @&#34;,&#34;; } _labels = _label.Remove(_label.Length - 1); _data = _data.Remove(_data.Length - 1); hdnLabels.Value = _labels; hdnData.Value = _data; } </code><li><pre> </pre>在 Page_Load 事件处理程序中，从 SQL 数据库获取数据并根据您存储的数据填充整数、小数或浮点数字数组。假设您最终得到一个包含数据的数组</li> <li> </li></ol><code>protected string weeklyData;</code><p><pre> </pre> </p>使用 <ol start="3">JavaScriptSerializer<li> 类将其序列化为字符串并分配给weeklyData 类变量，如下所示：<a href="http://msdn.microsoft.com/en-us/library/system.web.script.serialization.javascriptserializer.aspx" rel="nofollow noreferrer"> </a> </li></ol><code>int[] data = [8, 5, 8, 6, 0, 2, 2];</code><p><pre> </pre> </p>在图表初始化代码中分配weeklyData变量，例如： <ol start="4"><code>JavaScriptSerializer serializer = new JavaScriptSerializer(); weeklyData = serializer.Serialize(data);</code><li><pre> </pre> </li>另一个更好的选择是编写一个 WEB API 服务，该服务将公开一个端点，用于以 json 数组格式获取每周数据。然后，就可以使用jquery get方法来获取数据，然后初始化图表了</ol> <p><code>data: &lt;%= weeklyData %&gt;,</code></p> <pre> </pre></answer>

如何将日期放入 charjs Angular 17 中？

我对角度还很陌生，我的组件上有这个代码： 从“@Angular/core”导入{组件、注入、输入}； 从 '@angular/common' 导入 { CommonModule } ； 从'chart.js/a...导入图表

如何在模块外使用ChartJS？

我正在尝试在纯JavaScript中使用chart.js，例如 我的内容 我正在尝试在纯JavaScript中使用chart.js，例如 <html> <body> <DIV>my contents</div> <script src="/static/defapp/js/chart.min.js"></script> <script> const myChart = new Chart(ctx, {...}); </script> </body> </html> （我的环境位于aws隔离子网中，因此无法访问互联网，因此，我无法使用CDN） 上面的代码显示这样的错误 未捕获的语法错误：无法在模块外部使用 import 语句（位于 Chart.min.js:1:1） 然后我检查了这篇文章。 它使用 chart.umd.js，但是我在 GitHub 中找不到 chart.umd.js。 我在哪里可以找到这个？ 将 Chart.js 与 CDN 结合使用： 不要通过本地文件路径包含 Chart.js 库，而是尝试使用内容交付网络 (CDN) 链接来包含该库。这种方法有时可以帮助避免与模块语法相关的问题。 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> 检查 Chart.js 版本兼容性： 确保您使用的 Chart.js 版本与普通 JavaScript 用法兼容。旧版本的 Chart.js 可能不完全支持这种使用模式。 将 Chart.js 代码包装在函数中： 将 Chart.js 代码包装在函数内，并在文档加载后调用该函数。这可确保 Chart.js 库在尝试使用之前已完全加载。 <script> function createChart() { const ctx = document.getElementById('myChart').getContext('2d'); const myChart = new Chart(ctx, {...}); } window.onload = createChart; </script> 使用Chart.js模块版本： 如果您的项目支持 ES6 模块，请考虑使用 Chart.js 的模块版本。此版本旨在与现代 JavaScript 模块语法配合使用。 <script type="module"> import Chart from 'https://cdn.jsdelivr.net/npm/chart.js'; const ctx = document.getElementById('myChart').getContext('2d'); const myChart = new Chart(ctx, {...}); </script> 检查浏览器兼容性： 确保您使用的浏览器支持 Chart.js 使用的 JavaScript 功能。一些较旧的浏览器可能不完全支持现代 JavaScript 语法。

如何在纯JavaScript中使用chart.js

我正在尝试在纯JavaScript中使用chart.js，例如 我的内容 我正在尝试在纯 JavaScript 中使用 Chart.js，例如 <html> <body> <DIV>my contents</div> <script src="/static/defapp/js/chart.min.js"></script> <script> const myChart = new Chart(ctx, {...}); </script> </body> </html> 这显示了这样的错误 Uncaught SyntaxError: Cannot use import statement outside a module (at chart.min.js:1:1) 然后我检查了这篇文章 . 它使用chart.umd.js，但是我在github中找不到chart.umd.js。 我在哪里可以找到这个？ 将 Chart.js 与 CDN 结合使用： 不要通过本地文件路径包含 Chart.js 库，而是尝试使用内容交付网络 (CDN) 链接来包含该库。这种方法有时可以帮助避免与模块语法相关的问题。 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> 检查 Chart.js 版本兼容性： 确保您使用的 Chart.js 版本与普通 JavaScript 用法兼容。旧版本的 Chart.js 可能不完全支持这种使用模式。 将 Chart.js 代码包装在函数中： 将 Chart.js 代码包装在函数内，并在文档加载后调用该函数。这可确保 Chart.js 库在尝试使用之前已完全加载。 <script> function createChart() { const ctx = document.getElementById('myChart').getContext('2d'); const myChart = new Chart(ctx, {...}); } window.onload = createChart; </script> 使用Chart.js模块版本： 如果您的项目支持 ES6 模块，请考虑使用 Chart.js 的模块版本。此版本旨在与现代 JavaScript 模块语法配合使用。 <script type="module"> import Chart from 'https://cdn.jsdelivr.net/npm/chart.js'; const ctx = document.getElementById('myChart').getContext('2d'); const myChart = new Chart(ctx, {...}); </script> 检查浏览器兼容性： 确保您使用的浏览器支持 Chart.js 使用的 JavaScript 功能。一些较旧的浏览器可能不完全支持现代 JavaScript 语法。

chartjs-plugin-dragdata 不适用于散点图

似乎chartjs-plugin-dragdata插件仅适用于折线图。但就我而言，我需要一张带有一个数据点的散点图，我想使其可拖动。但是拖放数据点后...

ChartJS 注释是否在 X 轴索引上呈现线条注释？

问题描述： 我正在开发一个项目，需要在数据集中渲染一条垂直线以指示图表上的收支平衡点。 x 轴标签是根据...

使用 Alpine.js 和 Livewire 更新 Chart.js 标签会破坏图表

我正在使用 Alpine.js 和 Livewire 来动态更新 Chart.js 图表。 我通过 Alpine 和 Livewire 每 30 秒更新一次图表。更新永远工作得很好......

Chart.js v3 保持 2 个图表并排对齐

如何并排对齐两个图表，类似于 Stack Overflow 帖子 Chartjs - 使用 Chart.js v3 保持 2 个图表并排对齐？ 这是我的代码。 如何并排对齐两个图表，类似于 Stack Overflow 帖子Chartjs - 使用 Chart.js v3 保持 2 个图表并排对齐中所描述的内容？ 这是我的代码。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://code.jquery.com/jquery-3.7.1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js"></script> <style> #chart_a, #chart_b { width: 320px; height: 350px; } .label { text-align: center; width: 600px; font-size: 20px; font-weight: bold; margin: 20px; } .chart_container { float: left; } </style> </head> <body> <div id="aligned"> <div class="label">Aligned</div> <div class="chart_container"> <canvas id="chart_a"></canvas> </div> <div class="chart_container"> <canvas id="chart_b"></canvas> </div> </div> <script> var data, ctx; data = { labels: ["Dmitri.Ivanovich.Mendeleev", "Yuri.Alekseyevich.Gagarin", "Alexey.Arkhipovich.Leonov"], datasets: [{ label: "My First dataset", fillColor: "rgba(220,220,220,0.5)", strokeColor: "rgba(220,220,220,0.8)", highlightFill: "rgba(220,220,220,0.75)", highlightStroke: "rgba(220,220,220,1)", data: [50, 88, 15] }] }; console.log(document.getElementById("chart_b")) ctx = document.getElementById("chart_b").getContext("2d"); var mychart2 = new Chart(ctx, { type: 'bar', data: data, options: { animation: false } }); /* // This code is valid only for v1 Chart.types.Bar.extend({ name: "BarAlt", draw: function () { this.scale.endPoint = this.options.endPoint; Chart.types.Bar.prototype.draw.apply(this, arguments); } }); */ data = { labels: ["Iantojones", "Jackharkness", "Owenharper"], datasets: [{ label: "My First dataset", fillColor: "rgba(220,220,220,0.5)", strokeColor: "rgba(220,220,220,0.8)", highlightFill: "rgba(220,220,220,0.75)", highlightStroke: "rgba(220,220,220,1)", data: [50, 88, 15] }] }; ctx = document.getElementById("chart_a").getContext("2d"); var mychart1 = new Chart(ctx, { type: 'bar', // type: 'barAlt' data: data, options: { animation: false, // endPoint: mychart2.scale.endPoint, }, }); </script> </body> </html> 虽然我意识到使用 chart.helpers.extend 实现与 v2 中相同的功能是可能的，但我不确定 v3 中的替代方法，因为助手已被删除。 在ES2015类中使用它似乎很好，如https://www.chartjs.org/docs/3.4.1/developers/charts.html所示，但我不知道如何导入BarController。 意想不到的结果： 预期结果： 更新说明：虽然此解决方案是针对 Chart.js 版本 3.4.1 实现的。正如所要求的，它在当前版本 4.4.1 中无需更改即可工作。 除了一些技术上的复杂性（比如现在的 Chart.js 的布局） 相当复杂，不能通过设置来改变 y 轴的高度 一个变量），存在标签旋转的问题：默认方式标签 计算旋转允许大标签延伸到图表区域的左侧 将其压缩到右侧（问题中描述为不需要）。 我通过一个使用三角函数的插件解决了这个问题 计算标签的新旋转，以便图表区域可以有其 全部可能的宽度。该插件使用 afterLayout 钩子，因为这是计算轴大小的最早阶段。 即使画布大小没有调整，设置maintainAspectRatio: false也是必须的 动态地，因为它允许图表区域扩展到最大可用范围 空间，无论画布大小如何。 问题的主要部分，也在afterLayout钩子中实现 很简单：resize 第一个图表，使得 bottom 的 chartArea 值与 第二张图表的 bottom 的 chartArea。 const data1 = { labels: ["Iantojones", "Jackharkness", "Owenharper"], datasets: [{ label: "My First dataset", fillColor: "rgba(220,220,220,0.5)", strokeColor: "rgba(220,220,220,0.8)", highlightFill: "rgba(220,220,220,0.75)", highlightStroke: "rgba(220,220,220,1)", data: [50, 88, 15] }] }; const data2 = { labels: ["Dmitri.Ivanovich.Mendeleev", "Yuri.Alekseyevich.Gagarin", "Alexey.Arkhipovich.Leonov"], datasets: [{ label: "My First dataset", fillColor: "rgba(220,220,220,0.5)", strokeColor: "rgba(220,220,220,0.8)", highlightFill: "rgba(220,220,220,0.75)", highlightStroke: "rgba(220,220,220,1)", data: [50, 88, 15] }] }; const mychart2 = new Chart("chart_b", { type: 'bar', data: data2, options: { animation: false, maintainAspectRatio: false, layout:{ autoPadding: false, //padding: {left: 20, bottom: 30} // test with padding } }, plugins: [ { afterLayout(chart){ //label rotation if(!chart.__rotationFixed){ // run only once, avoid infinite recursion chart.__rotationFixed = true; const xScale = chart.scales.x, yScale = chart.scales.y; const extraSpaceToLeft = yScale.left - yScale.paddingLeft; if(extraSpaceToLeft > 5){ const currentLeft = chart.chartArea.left, minTheoreticalLeft = yScale.width, currentRotation = xScale.labelRotation * Math.PI / 180, label0XG = xScale.getPixelForValue(xScale.ticks[0].value), label0Length = label0XG / Math.cos(currentRotation), cosMin = (label0XG - currentLeft + minTheoreticalLeft) / label0Length, minRotation = cosMin < 0 ? 90 : Math.acos(cosMin) * 180 / Math.PI; const gainToLeft = label0XG - label0Length * cosMin; if(cosMin > 0 && Math.abs(gainToLeft - extraSpaceToLeft) > 10){ console.warn(`Assumption failed; rotation possibly miscalculated! `+ `extraSpaceToLeft = ${extraSpaceToLeft} gainToLeft = ${gainToLeft}`) } xScale.options.ticks.minRotation = minRotation; xScale.options.ticks.maxRotation = minRotation; chart.options.scales.x.ticks.minRotation = minRotation; chart.options.scales.x.ticks.maxRotation = minRotation; chart._updateLayout(chart._minPadding); // hacky, but cleaner //chart.update('none'); // documented alternative to the above } } } } ] }); /*const mychart1 = */new Chart("chart_a", { type: 'bar', data: data1, options: { maintainAspectRatio: false, animation: false, }, plugins:[ { afterLayout(chart){ // resize the first chart if(!chart.__resized){ // run only once, avoid infinite recursion chart.__resized = true; const deltaY = mychart2.chartArea.bottom - chart.chartArea.bottom; chart.resize(chart.canvas.offsetWidth, chart.canvas.offsetHeight + deltaY); } } } ] }); #chart_a, #chart_b{ width: 320px; height: 350px; background-color: rgba(192, 192, 192, 0.7); /* to see what's happening */ } .label { text-align: center; width: 600px; font-size: 20px; font-weight: bold; margin: 20px; } #aligned{ min-width: 650px } .chart_container { float: left; } <div id="aligned"> <div class="label">Aligned</div> <div class="chart_container" id="container_a"> <canvas id="chart_a"></canvas> </div> <div class="chart_container" id="container_b"> <canvas id="chart_b"></canvas> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js"></script> <!--script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script--> 此解决方案具有优势（与旧版本的链接方案相比） Chart.js）画布中没有空白空间，因此它们可以垂直移动 在狭窄的介质中。 此外，它可以立即调整以调整（放大）第二个图表的大小，以便 很适合第一个。 const data1 = { labels: ["Iantojones", "Jackharkness", "Owenharper"], datasets: [{ label: "My First dataset", fillColor: "rgba(220,220,220,0.5)", strokeColor: "rgba(220,220,220,0.8)", highlightFill: "rgba(220,220,220,0.75)", highlightStroke: "rgba(220,220,220,1)", data: [50, 88, 15] }] }; const data2 = { labels: ["Dmitri.Ivanovich.Mendeleev", "Yuri.Alekseyevich.Gagarin", "Alexey.Arkhipovich.Leonov"], datasets: [{ label: "My First dataset", fillColor: "rgba(220,220,220,0.5)", strokeColor: "rgba(220,220,220,0.8)", highlightFill: "rgba(220,220,220,0.75)", highlightStroke: "rgba(220,220,220,1)", data: [50, 88, 15] }] }; const mychart1 = new Chart("chart_a", { type: 'bar', data: data1, options: { maintainAspectRatio: false, animation: false, } }); /*const mychart2 = */new Chart("chart_b", { type: 'bar', data: data2, options: { animation: false, maintainAspectRatio: false, layout:{ autoPadding: false, //padding: {left: 20, bottom: 30} // test with padding } }, plugins: [ { afterLayout(chart){ //label rotation if(!chart.__rotationFixed){ // run only once, avoid infinite recursion chart.__rotationFixed = true; const xScale = chart.scales.x, yScale = chart.scales.y; const extraSpaceToLeft = yScale.left - yScale.paddingLeft; if(extraSpaceToLeft > 5){ const currentLeft = chart.chartArea.left, minTheoreticalLeft = yScale.width, currentRotation = xScale.labelRotation * Math.PI / 180, label0XG = xScale.getPixelForValue(xScale.ticks[0].value), label0Length = label0XG / Math.cos(currentRotation), cosMin = (label0XG - currentLeft + minTheoreticalLeft) / label0Length, minRotation = cosMin < 0 ? 90 : Math.acos(cosMin) * 180 / Math.PI; const gainToLeft = label0XG - label0Length * cosMin; if(cosMin > 0 && Math.abs(gainToLeft - extraSpaceToLeft) > 10){ console.warn(`Assumption failed; rotation possibly miscalculated! `+ `extraSpaceToLeft = ${extraSpaceToLeft} gainToLeft = ${gainToLeft}`) } xScale.options.ticks.minRotation = minRotation; xScale.options.ticks.maxRotation = minRotation; chart.options.scales.x.ticks.minRotation = minRotation; chart.options.scales.x.ticks.maxRotation = minRotation; chart._updateLayout(chart._minPadding); // hacky, but cleaner //chart.update('none'); // documented alternative to the above } } // resize the second chart if(!chart.__resized && chart.__rotationFixed){ // run only once, avoid infinite recursion chart.__resized = true; const deltaY = mychart1.chartArea.bottom - chart.chartArea.bottom; chart.resize(chart.canvas.offsetWidth, chart.canvas.offsetHeight + deltaY); } } } ] }); #chart_a, #chart_b{ width: 320px; height: 350px; background-color: rgba(192, 192, 192, 0.7); /* to see what's happening */ } .label { text-align: center; width: 600px; font-size: 20px; font-weight: bold; margin: 20px; } #aligned{ min-width: 650px } .chart_container { float: left; } <div id="aligned"> <div class="label">Aligned</div> <div class="chart_container" id="container_a"> <canvas id="chart_a"></canvas> </div> <div class="chart_container" id="container_b"> <canvas id="chart_b"></canvas> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js"></script>

如何增加标签和图表区域之间的空间？

我所有的标签都在栏的顶部。我可以看到这个： 但我希望是这样的： 填充不适用于 xAxes，但适用于 yAxes。 图例：{显示：假}， 尺度：{ ...

react-chartjs-2与chartJs 3：错误“arc”不是注册元素

我正在开发一个 React 应用程序，我想在其中显示图表。我尝试使用react-chartjs-2，但我找不到让它工作的方法。当我尝试使用 Pie 组件时，出现错误：Error: "arc...

如何为chart.js（条形图）动态推送数据集？

我使用chartjs（条形图）来显示一些数据。 我尝试将数据动态添加到数据集数组，但它不起作用。 例如，假设我在数据集数组中有 2 个对象，并且我动态...

React Chartjs 未显示动态值

我正在使用 Chartjs 库在我的应用程序中显示图表。我在单独的组件中使用图表。当值被硬编码时，组件显示图表。我想传递值f...