chart.js 相关问题

这是我的图表代码。 var ctx = document.getElementById("myChart"); var myChart = 新图表(ct...</desc> <question vote="0"> <p>这是我的图表代码。</p> <p></p> <pre><code> <script src="../Scripts/Chart.min.js"></script> <script> var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'line', data: { labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], datasets: [{ data: [1, 6, 2, 5, 9, 5, 6], label: "Issues Resolved", lineTension: 0, backgroundColor: 'transparent', borderColor: '#007bff', borderWidth: 4, pointBackgroundColor: '#007bff' }, { data: [8, 5, 8, 6, 0, 2, 2], label: "Issues Raised", lineTension: 0, backgroundColor: 'transparent', borderColor: '#ff8400', borderWidth: 4, pointBackgroundColor: '#ff8400' }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: false } }] }, legend: { display: true }, title: { display: true, text: 'Issues Raised VS Issues Resolved' } } }); </script> </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> <script src="../Scripts/Chart.min.js"></script> <script> $(function () { $.ajax({ type: 'POST', dataType: 'json', contentType: 'application/json', url: 'BackendFileName.aspx/GetChartData', // change to your .aspx filename data: '{}', success: function (response) { drawChart(response.d); }, error: function () { console.error("Error loading data! Please try again."); } }); }) function drawChart(dataValues) { var issuesResolved = []; var issuesRaised = []; for (var i = 0; i < dataValues.length; i++) { issuesResolved[i] = dataValues[i].issuesResolved; issuesRaised[i] = dataValues[i].issuesRaised; } var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'line', data: { labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], datasets: [{ data: issuesResolved, label: "Issues Resolved", lineTension: 0, backgroundColor: 'transparent', borderColor: '#007bff', borderWidth: 4, pointBackgroundColor: '#007bff' }, { data: issuesRaised, label: "Issues Raised", lineTension: 0, backgroundColor: 'transparent', borderColor: '#ff8400', borderWidth: 4, pointBackgroundColor: '#ff8400' }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: false } }] }, legend: { display: true }, title: { display: true, text: 'Issues Raised VS Issues Resolved' } } }); } </script> </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<ChartDetails> GetChartData() { List<ChartDetails> dataList = new List<ChartDetails>(); // Access SQL Database Data // Assign SQL Data to List<ChartDetails> dataList return dataList; } </code></p> <pre>在图表脚本中添加：</pre> <p><code><asp:HiddenField ID="hdnLabels" runat="server" Value="" /> <asp:HiddenField ID="hdnData" runat="server" Value="" /> </code></p> <pre>在代码后面：</pre> <p><code>labels: [<%= hdnLabels.Value %>], datasets: [ { data: [ <%= hdnData.Value %>], ... other options here, } ] </code></p> <pre>希望这有帮助...</pre> <p> </p> </answer>我相信你能做的是：<answer tick="false" vote="0"> <p> </p>在后面的代码中创建一个类级别字符串变量，用于保存序列化数组，例如 <ol><code> public void ShowChartData() string _data = ""; string _labels = ""; ......Loop your SqlDataReader .... .... while (dr.Read()) { _labels = _data + dr["DayOfWeek"].ToString() + @","; _data = _data + dr["DayOfWeekValue"].ToString() + @","; } _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: <%= weeklyData %>,</code></p> <pre> </pre></answer>

javascript c# asp.net chart.js

回答 0 投票 0

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

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

angular chart.js angular17

回答 1 投票 0

如何在模块外使用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

回答 1 投票 0

chart.js 相关问题

最新问题