chart.js 相关问题

Chart.js是一个JavaScript库,用于创建包含在网页上的动画交互式图形

图表元素是否可以填充我设置的大小,但不响应调整大小事件?

似乎只有当我设置选项 responsive:true 和 maintainAspectRatio:false 时,Chart.js 才会填充其父元素的尺寸。使用 responsive:false 它只会填充

回答 0 投票 0

如何将带有符号的数据库中的数据显示到 Chart.js?

我在此处将我的数据从数据库显示到我的图表时遇到问题我的查询例如: const 网络 = <?php echo json_encode($net);?>; const 月份 = <?php echo json_...</desc> <question vote="0"> <p>我在将我的数据从数据库显示到我的图表时遇到问题,例如我的查询:</p> <pre><code>&lt;script&gt; const net = &lt;?php echo json_encode($net);?&gt;; const Month = &lt;?php echo json_encode($month);?&gt;; const Deduction = &lt;?php echo json_encode($deductions);?&gt;; const data= { labels:Month, datasets: [{ order:1, label: &#39;Netpay&#39;, data: net, backgroundColor:[&#34;rgb(255, 165, 0)&#34;], borderWidth: 1, type: &#39;bar&#39;, }, { order:0, label: &#39;Deduction&#39;, data: deduction, backgroundColor:[&#34;rgb(0, 150, 255) &#34;], borderColor:[&#34;rgb(0, 150, 255) &#34;], borderWidth: 1, type: &#39;line&#39;, }], }; const config ={ data, display:true, options: { scales: { y: { beginAtZero: true, tick: { callback: function(data) { return &#39;₱&#39; + data; }, } }, } } }; const myChart = new Chart( document.getElementById(&#39;myChart&#39;), config ); &lt;/script&gt; </code></pre> <p>我附上了一张应该显示在我的图表上的数据图片 <a href="https://i.stack.imgur.com/10ORO.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tLzEwT1JPLnBuZw==" alt="enter image description here"/></a></p> <p>如果要显示数据,它应该看起来像这样“<a href="https://i.stack.imgur.com/15MJQ.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tLzE1TUpRLnBuZw==" alt="enter image description here"/></a>”,我尝试获取没有符号的数据并且它工作得很好但是如果我尝试使用带有符号的数据,例如 netpay: 10,000 它不会显示。</p> </question> </body></html>

回答 0 投票 0

按月显示员工项目的条形图,但不显示是否有第二块

这是此的延续,用户 2057925 非常棒地帮助了我,并给出了很好的解释。但是,由于与之前所做的相比,我的 javascript 仍然非常基础...

回答 0 投票 0

找不到名称“ChartOptions”

在 Angular 中我正在使用“chart.js”:“^3.9.1”,在 node_modules/chart.js/types/adapters.d.ts:1:15 - error T...

回答 1 投票 0

带有 chartjs-plugin-datalabels 的 ChartJSNodeCanvas 在第一个图表之后发布标签

我有一个 nodejs 服务器函数,它使用 ChartJSNodeCanvas 创建图表。我用它来创建几个图表,然后放入 pdf 文件中。 我要求将值放在条形图条的顶部(...

回答 0 投票 0

是否可以使用 momentjs 设置 vue-chartjs 3.5.1 以在 chart.js 中格式化日期

我正在通过 [email protected] 使用 [email protected],我正在尝试使用类似这样的选项通过选项进行一些日期格式化: 秤:{ x轴:[ { 类型:'时间', 时间:...

回答 1 投票 0

JS 图表:不要合并重复的 x 轴标签

我正在尝试使用 JSCharting 显示样条面积图(但该方法对我来说并不重要,任何工作解决方案都可以),使用字母作为 X 轴标签(我使用氨基酸......

回答 2 投票 0

在时间序列 Chart.JS 中将缺失数据点显示为零

我正在尝试使用 Chart.js 创建一个折线图来显示按时间间隔(15 分钟、1 天和 1 个月)聚合的请求。可能不是每个间隔都有数据点。 目前 Chart.js plo ...

回答 1 投票 0

Worldcloud chartJS TSX 扩展/移动

我在一个tsx项目中实现了这种形式的worldcloud:[https://www.npmjs.com/package/chartjs-chart-wordcloud]。云已实施并且大部分情况下运行良好。我对茶有useEffect...

回答 0 投票 0

如何在 chartjs 2.9.4 中为数据集中的每个数据添加标签?

在这里输入图片描述 有谁知道如何将此标签添加到 chartjs 2.9.4? 我需要在每个数据前添加标签 数据: { 标签: [ "M01-朱尔。", “M02-Août.&

回答 1 投票 0

如何通过相同的标签管理线、散点图?

我是 react-chartjs 2 的新手 这是我的阴谋。 有相同的标签,例如 FACTOR5 FACTOR5 FACTOR6 FACTOR6 ... 我想做的是同时打开/关闭情节。 当我禁用 FACTOR5 时,然后点...

回答 1 投票 0

ChartJS图形“左移”时如何防止“摆动”

我有一个 react chartjs 图表,它仅限于最新的 12 个条目,当达到 12 个条目时,图表会按预期向左移动,但是正如您在视频中看到的那样,它是“wi ...

回答 1 投票 0

我怎样才能实现这种行为?

我想在图表上显示这两条线,黑线应该就那样停止,不要传播到 2024 年 这些是每一行的数据,第一行: “公允价值”:[ ...

回答 0 投票 0

如何使用 react-chartjs-2 在圆环图的图例旁边添加文本

我想使用 react-chartjs-2 在甜甜圈图的图例右侧添加一些数字文本,如下图所示 我怎样才能做到这一点?

回答 0 投票 0

Chartjs 在数据更改时禁用缩放重置

我在 Vue 中使用 Chart.js。每当更改/重新计算图表数据时,都会重置缩放比例。如何在数据更改时禁用正在重置的缩放,同时仍允许用户使用 ...

回答 1 投票 0

如何使用 React.js 使图例选项卡在 chart.js 折线图中可聚焦?

我正在尝试让我所有的可点击元素都可以“tab-able”或只能通过键盘访问。有没有办法为 chart.js 中的各个图例提供 tabIndex?这是我第一次使用 cha...

回答 1 投票 0

如何在 Javascript [重复] 中总结多个数据集 [0, 1, 2, 3, 4...] 和总是数据 [0]

我还是菜鸟,需要一些帮助。 有我的可变图表数据作为起点: var 图表数据 = { 标签: [ “酒吧 1”, “酒吧 2”, “酒吧 3”, &qu...

回答 1 投票 0

Chart.js - 如何更动态地编写这个 Javascript

我是 Chart.js 的新手,一般在编写 javascript 方面也不是很有经验。我目前已经拼凑了一个 4 折线图,但我想让代码更动态一点,这样如果...

回答 1 投票 0

Angular 将 JSON 数据推入数组

我正在尝试弄清楚如何使用打字稿将 json 对象推送到数组中。我设法用 json 对象的一个值来完成它,但我也需要用第二个值来完成它。 这是结构...

回答 1 投票 0

如何使用混合图表在x轴上移动散点? - ChartJs

我想知道是否可以使用 chartJS 中的混合图表在 x 轴上移动散点。 图片示例 我在这里创建了一个例子但是你可以看到 x 轴它被忽略了。

回答 0 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.