chart.js 相关问题

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

Chart.js 删除第一个数据集和标签

我正在制作一个货币钱包网站,我想在主页上放置一张每分钟更新一次的美元比特币价值图表。我得到了图表,比特币价值,正在插入值,但我想要那个

回答 2 投票 0

使用点样式和密集折线图

我的图表中的线条非常接近,但仍需要在图例中进行区分。该折线图有几百个数据点,因此当我使用 pointstyle 来区分时...

回答 1 投票 0

数据图表中的删减百分比

我如何在图表js中的数据图表中添加剪切百分比,目标id使图表更薄。 常量数据 = { 标签:['onek'、'teo'、'三']、 数据集:[{ 数据:[1,3,9],

回答 1 投票 0

Chart.js 在隐藏图例标签时更新图表?

Chart.js 3 - 我有一个甜甜圈图,它有一个带有generateLabels函数的图例,该函数根据图形颜色更改文本颜色。 插件:{ 传奇: { 标签: { 生成标签:(

回答 1 投票 0

设置Canvas宽度和高度问题

我正在尝试设置使用 Chart.js 制作的图表的画布大小。它没有调整大小。 让 ctx= document.createElement("canvas") ctx.宽度 = 200 ctx.高度 = 100 document.body.appendChild(ct...

回答 1 投票 0

如何在websocket事件上更新chart.js?

当从 websocket 收到日期时,我尝试使用 .update() 方法更新 Line Chart.js 的数据,但这不起作用,我无法解决问题。 这是我的代码: 当从 websocket 收到日期时,我尝试使用 .update() 方法更新 Line Chart.js 的数据,但这不起作用,我无法解决问题。 这是我的代码: <!doctype html> <html> <head> <title>Line Chart</title> <script src="js/Chart.js"></script> <script type="text/javascript"> if ("WebSocket" in window) { var ws = new WebSocket("ws://localhost:8888/ws"); ws.onopen = function() { ws.send("data"); }; ws.onmessage = function(evt) { var received_msg = JSON.parse(evt.data) alert(received_msg[0]); alert(received_msg[1]); lineChartData.labels = received_msg[0]; lineChartData.datasets[0].data = received_msg[1]; lineChartData.update(); }; ws.onclose = function() { // websocket is closed. console.log("Connection is closed..."); }; } else { // The browser doesn't support WebSocket console.log("WebSocket NOT supported by your Browser!"); } </script> </head> <body> <div style="width:70%"> <div> <canvas id="canvas" height="450" width="800"></canvas> </div> </div> <script> var lineChartData = { labels: [], datasets: [{ label: "My Second dataset", fillColor: "rgba(151,187,205,0.2)", strokeColor: "rgba(151,187,205,1)", pointColor: "rgba(151,187,205,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(151,187,205,1)", data: [] }] } var options = { responsive: true, scaleShowGridLines: false, scaleLineColor: "rgba(0,0,0,.1)", } var ctx = document.getElementById("canvas").getContext("2d"); window.myLine = new Chart(ctx).Line(lineChartData, options); </script> </body> </html> 这是我想要更新图表的部分: ws.onmessage = function(evt) { var received_msg = JSON.parse(evt.data) alert(received_msg[0]); alert(received_msg[1]); lineChartData.labels = received_msg[0]; lineChartData.datasets[0].data = received_msg[1]; lineChartData.update(); }; 从警报输出中,我收到了格式良好的良好数据,但更新不起作用。 你能帮我吗? 问题是您正在更新数据“lineChartData”,但您想在图表上调用 update() 所以 ws.onmessage = function(evt) { var received_msg = JSON.parse(evt.data) alert(received_msg[0]); alert(received_msg[1]); lineChartData.labels = received_msg[0]; lineChartData.datasets[0].data = received_msg[1]; window.myLine.update(); //<-- magic }; 尝试将数据推入数组而不是重新分配它们 例如 this.lineChartData.labels.push(received_msg[0]); this.lineChartData.datasets[0].data.push(received_msg[1]); window.myLine.update(); 或者如果它们是对象,您可以获取特定数据并将其推入数组中。 如果你绘制的图表不是chart.js 例如,ccchart http://jsfiddle.net/UkdvS/602/ https://github.com/toshirot/ccchart var chartdata81 = { "config": { "title": "WebSocket Line Chart", "subTitle": "realtime", "bg": "#666", "type": "line", "xLines": [{ "useRow":1, "color":"rgba(250,250,250,0.7)" }] }, "data": [ ["year"], ["data1"], ["data2"] ] }; ccchart .init('hoge', chartdata81) .ws('ws://ccchart.com:8016') .on('message', ccchart.wscase.oneColAtATime); 此时的WebSocket数据格式如下: ["23:41:47",58,41] ["23:41:47",30,46] ["23:41:47",7,35] ["23:41:47",46,34] ["23:41:47",59,41] ["23:41:47",95,47] ["23:41:47",22,40] ["23:41:47",73,35] ・・・・ ・・・・ ・・・・ @see qiita.com/toshirot/items/a461cdc8c2079d9b8530 (日语)

回答 3 投票 0

如何使用reactjs在chart.js中的甜甜圈图表上显示速度计

我创建了一个半圆环图,想像速度计一样显示,但无法实现。我已浏览此链接,我想显示我的图表 与上面的链接类似...

回答 1 投票 0

chartjs 使用选择值更改时间显示

我尝试改编一个简单的chartjs代码,以便根据选择字段中的值修改时间显示到我的html页面中。事实是我不明白为什么所选的值没有链接......

回答 1 投票 0

使用generateLabel时,标签文本上的删除线不起作用

从图例中单击时应用删除线的标签项文本的默认功能不起作用。我想解决这个问题,以便应用删除线...

回答 1 投票 0

如何将缩放区域限制在chartArea内

我尝试在图表区域内使用缩放,但是放大会导致缩放使用整个图表区域而不是 X 轴和 Y 轴内的缩放。 var 任意行 = { ...

回答 1 投票 0

如何使用txt文件中的数据通过chart.js构建图表

我尝试找到一种方法将txt文件中的数据使用到chart.js图形中。 我对 JS 不太友好,所以我请求一些帮助...... 所以,我成功的是使用以下代码构建了一个漂亮的简单图表: ...

回答 1 投票 0

ChartJS:用不同的颜色填充高于最大值、介于最大值/最小值之间以及低于最小值限制的曲线数据集

Rails 5、ChartKick 5.0.5 => ChartJS 4.4.1 我在 ChartJS 中有一个曲线图,它在 Y 轴上绘制大约 0 的值,并具有单独的正值最大阈值和负值最小阈值...

回答 1 投票 0

通过 Chart.js 使用二维数据集数组

为了清晰和隐私,我更改了数据主题,但我的实际问题是相同的。 我有按地区组织的 CSV 格式的数据,所有格式如下: 加拿大.csv: 是的...

回答 1 投票 0

如何在Chartkick中的饼图中显示标签?

我正在使用Haml。 所以代码是这样的: = pie_chart @chart_ ratings,甜甜圈:true,后缀:“%”,加载:“正在生成图表...”,下载:true,宽度:“350px”,库:{

回答 2 投票 0

如何用javascript在条形图上绘制百分比

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

回答 0 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

在图表选项中输入与“剪切”相关的错误

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

回答 1 投票 0

如何使该行从中间开始而不是从列的开头开始?

我正在使用chartjs(v3)(和react-chartjs来集成)创建折线图,并且我在自定义线以从第一列的中间开始(并且也在

回答 1 投票 0

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