chart.js 相关问题

如何以 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...

如何使用Chart.js为折线图上的数据点添加脉动动画？

正如问题中提到的，我正在使用 Charts.js 库。就我而言，我想创建一个折线图。折线图有一些数据点，我想通过给它们提供动画来突出显示它们。 普...

构建一个 Angular 库，其中包含带有插件的 Chart.js 提供程序？

我正在尝试为 Chart.js 构建一个包含插件的 Angular 独立库。 似乎在注册插件时，chart.js 会修改 ChartConfiguration 类型以便分配...

Chart.js core.js:6162 ERROR 错误：“line”不是已注册的控制器

const GainContext = this.gainRef.nativeElement.getContext('2d') GainContext.canvas.height = '300px' 新图表（gainContext，createChartConfig（gainConfig）） 函数 createChartConfig({类型，实验室...

Angular 组件 ngDestroy 没有被调用，图表也没有被销毁

我正在将现有的 Chart JS 2 代码迁移到 3.9.1 并将 Angular 14 升级到 16。这是我的代码： 图表线.component.html 我正在将现有的 Chart JS 2 代码迁移到 3.9.1 并将 Angular 14 升级到 16。这是我的代码： 图表线.component.html <!--chart container --> <div id="container"> <div id="scrollArea" class="CMI-ChartWrapper"> <div class="CMI-Chart"> <canvas baseChart #lineCanvas [id]="idChartname"></canvas> </div> </div> <canvas #targetCanvas id="chartAxis" height="400"></canvas> </div> 图表线.component.ts import { Component, OnInit, ViewChild, ElementRef, Input, OnDestroy } from "@angular/core"; import Chart from "chart.js/auto"; import ChartDataLabels from 'chartjs-plugin-datalabels'; import { DataServiceService } from 'src/app/services/data-service/data-service.service'; import { data } from '../data'; @Component({ selector: 'app-chart-line', templateUrl: './chart-line.component.html', styleUrls: ['./chart-line.component.scss'], }) export class ChartLineComponent implements OnInit, OnDestroy { @ViewChild('scroll') scroll: any; @ViewChild('targetCanvas', { static: true }) targetCanvasRef: ElementRef<HTMLCanvasElement>; @ViewChild("lineCanvas", { static: true }) lineCanvasRef: ElementRef<HTMLCanvasElement>; @Input('idname') idChartname: any; data: any; public myChart: Chart; @Input() resizedata: any; constructor(private dataservice: DataServiceService) { this.data = data[0].data1; this.dataservice.saveData(undefined); } ngOnInit() { if (this.resizedata != undefined) { this.idChartname = this.resizedata; } } ngAfterViewInit(): void { if (this.resizedata != undefined) { this.idChartname = this.resizedata; } this.dataservice.getFilteredData1.subscribe(message => { if (message) { var filteredData = this.filterFunction(message); this.renderChart(filteredData); } else { this.renderChart(this.data); } }); } filterFunction(filterParams: any) { var newChartData = [...this.data] if (filterParams.searchTerm == '') { var filteredYearData = [] filterParams.selectedYear.forEach(element => { var newItem = newChartData.filter(item => { return item['year'].toLowerCase().includes(element); }) filteredYearData.push(newItem[0]); }); return filteredYearData; } else if (filterParams.selectedYear == '' || filterParams.selectedYear == 'none') { var filterYear = newChartData.filter(item => { return item['year'].toLowerCase().includes(filterParams.searchTerm.toLowerCase()); }) var filterProfit = newChartData.filter(item => { return item['profit'].toLowerCase().includes(filterParams.searchTerm.toLowerCase()); }) if (filterProfit.length == 0) { filterProfit = filterYear } var filterValue = newChartData.filter(item => { return item['value'].toLowerCase().includes(filterParams.searchTerm.toLowerCase()); }) if (filterValue.length == 0) { filterValue = filterProfit } return filterValue; } else { var filteredYearData = [] filterParams.selectedYear.forEach(element => { var newItem = newChartData.filter(item => { return item['year'].toLowerCase().includes(element); }) filteredYearData.push(newItem[0]); }); var filterYear = filteredYearData; var filterProfit = filterYear.filter(item => { return item['profit'].toLowerCase().includes(filterParams.searchTerm.toLowerCase()); }) var filterValue = filterYear.filter(item => { return item['value'].toLowerCase().includes(filterParams.searchTerm.toLowerCase()); }) var filterAllData if (filterProfit.length == 0 && filterValue.length != 0) { filterAllData = filterValue; } else if (filterProfit.length != 0 && filterValue.length == 0) { filterAllData = filterProfit; } else { filterAllData = filterValue; } return filterAllData; } } renderChart(data: any) { if (this.myChart) { this.myChart.destroy(); } Chart.register(ChartDataLabels); Chart.defaults.plugins.datalabels.anchor = 'start'; Chart.defaults.plugins.datalabels.align = 'start'; Chart.defaults.scale.grid.drawOnChartArea = false; Chart.defaults.scale.grid.drawOnChartArea = false; Chart.defaults.plugins.legend.labels.usePointStyle = true; const lineCanvas: any = document.getElementById(this.idChartname); const targetCanvas: any = document.getElementById("chartAxis"); if (lineCanvas != null && targetCanvas != null) { const ctx = targetCanvas.getContext("2d"); let rectangleSet = false; const targetCtx = targetCanvas.getContext("2d"); this.myChart = new Chart(ctx, { type: "line", data: { labels: data.map(x => x.year), datasets: [ { label: "Margin", fill: false, tension: 0.2, backgroundColor: "rgba(75,192,192,0.4)", borderColor: "#006C5B", borderCapStyle: "butt", borderDash: [], borderDashOffset: 0.0, borderJoinStyle: "miter", pointBorderColor: "#006C5B", pointBackgroundColor: "#006C5B", pointBorderWidth: 1, pointHoverRadius: 5, pointHoverBackgroundColor: "#006C5B", pointHoverBorderColor: "#003453", pointHoverBorderWidth: 2, pointRadius: 4, pointHitRadius: 10, spanGaps: false, data: data.map(x => x.value), borderWidth: 1 } ] }, /* chart options for design */ options: { maintainAspectRatio: false, aspectRatio: 1, responsive: true, scales: { x: { ticks: { // fontColor: 'black', // fontStyle: 'bold', }, grid: { color: 'rgba(171,171,171,1)', lineWidth: 2 }, title: { display: true, text: 'Year', // fontColor: 'black', font:{ family:'Helvetica Neue', size:14, } //fontStyle: 'bold', } }, y: { beginAtZero: true, ticks: { padding: 0, // stepSize:10, // fontColor: 'black', //fontStyle: 'bold', callback: function (value) { return value + "%" } }, grid: { color: 'rgba(171,171,171,1)', lineWidth: 2 }, title: { display: true, text: 'Margin (%)', // fontColor: 'black', font:{ family:'Helvetica Neue', size:14, } // fontStyle:'bold' }, } }, layout: { padding: { left: 0, right: 0, top: 0, bottom: 0 } }, plugins: { // ChartsJS DataLabels initialized here legend: { display: true, position: 'top', labels: { font: { family:'Helvetica Neue' } // fontColor: '#333', } }, datalabels: { formatter: function (value, context) { return value + "%" }, anchor: 'start', align: 'right', padding: { left: 0, right: 25, top: 40, bottom: 0 }, // formatter: Math.round, font: { // weight: 'bold', size: 12, family: 'Helvetica Neue' }, } }, animation: { onComplete: function () { if (!rectangleSet) { const scale = window.devicePixelRatio; const copyWidth = this.scales.y.width - 10; const copyHeight = this.scales.y.chart.height + this.scales.y.top + 10; targetCtx.scale(scale, scale); targetCtx.canvas.width = copyWidth; targetCtx.canvas.height = copyHeight; targetCtx.canvas.style.width = copyWidth + 'px'; targetCtx.canvas.style.height = copyHeight + 'px'; targetCtx.drawImage(lineCanvas, 0, 0, copyWidth * scale, copyHeight * scale, 0, 0, copyWidth * scale, copyHeight * scale); // ctx.clearRect(0, 0, copyWidth, copyHeight); targetCtx.clearRect(0, 0, copyWidth, copyHeight); rectangleSet = true; } }, onProgress: function () { if (rectangleSet) { var copyWidth = this.scales.y.width; var copyHeight = this.scales.y.height + this.scales.y.top + 10; this.ctx.clearRect(0, 0, copyWidth, copyHeight); } }, }, }, }); } else { //this.myChart.update(); } } scrollleft() { document.getElementById('scrollArea').scrollLeft += -30; } scrollright() { document.getElementById('scrollArea').scrollLeft += 30; }; ngOnDestroy() { console.log("destroyed"); this.myChart.destroy(); //this.dataservice.saveData(undefined); } } 数据服务.service.ts import { Injectable } from '@angular/core'; import { BehaviorSubject, Observable } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class DataServiceService { private filteredData = new BehaviorSubject<any>(""); getFilteredData1: Observable<any>; constructor() { this.getFilteredData1 = this.filteredData.asObservable(); } saveData(value) { this.filteredData.next(value); } } boundry.component.html <ion-card class="component-boundry content_class"> <!-- Charts --> <ng-container *ngIf="renderComponent=='chart-animated-line'"> <app-chart-animated-line></app-chart-animated-line> </ng-container> <ng-container *ngIf="renderComponent=='chart-bar'"> <app-chart-bar idname="barChartId1"></app-chart-bar> </ng-container> <ng-container *ngIf="renderComponent=='chart-line'"> <app-chart-line idname="lineChartId1"></app-chart-line> </ng-container> <ng-container *ngIf="renderComponent=='chart-multiple'"> <app-chart-multiple></app-chart-multiple> </ng-container> <!--<ng-container *ngIf="renderComponent=='chart-pie'"> <app-chart-pie></app-chart-pie> </ng-container>--> <ng-container *ngIf="renderComponent=='chart-bubble'"> <app-chart-bubble></app-chart-bubble> </ng-container> <!-- file explorer --> <ng-container *ngIf="renderComponent=='file-attachment'"> <app-attachment></app-attachment> </ng-container> </ion-card> 出现错误ERROR Error: Canvas is already in use. Chart with ID '11' must be destroyed before the canvas with ID 'chartAxis' can be reused. 因为它没有被 ngOnDestroy 方法破坏。使用 Angular 14 及以下版本和 Chart JS 2 可以正常工作。我不明白为什么 16 会发生这种情况。请帮忙解决。 正如错误所述，您正在硬编码 ID chartAxis，因此多个 html 元素将重复相同的 ID，这是错误的，您可以尝试以下更改，我们通过附加 将 ID 设置为动态-Axis 添加到您作为输入提供的动态 ID 的末尾，这可能会解决您的问题！ 图表线.component.html <!--chart container --> <div id="container"> <div id="scrollArea" class="CMI-ChartWrapper"> <div class="CMI-Chart"> <canvas baseChart #lineCanvas [id]="idChartname"></canvas> </div> </div> <canvas #targetCanvas [id]="idChartname+'-Axis'" height="400"></canvas> </div> 图表线.component.ts ... Chart.defaults.plugins.legend.labels.usePointStyle = true; ... const lineCanvas: any = document.getElementById(this.idChartname); const targetCanvas: any = document.getElementById(`${this.idChartname}-Axis`); // <-- changed here! ...

自定义 Chartjs 工具提示以仅显示 Y 值

有没有办法自定义chartjs工具提示以仅显示Y值而不覆盖所有回调？ 通读文档，似乎所有回调都必须是