Chart.js是一个JavaScript库,用于创建包含在网页上的动画交互式图形
我正在制作一个货币钱包网站,我想在主页上放置一张每分钟更新一次的美元比特币价值图表。我得到了图表,比特币价值,正在插入值,但我想要那个
我的图表中的线条非常接近,但仍需要在图例中进行区分。该折线图有几百个数据点,因此当我使用 pointstyle 来区分时...
我如何在图表js中的数据图表中添加剪切百分比,目标id使图表更薄。 常量数据 = { 标签:['onek'、'teo'、'三']、 数据集:[{ 数据:[1,3,9],
Chart.js 3 - 我有一个甜甜圈图,它有一个带有generateLabels函数的图例,该函数根据图形颜色更改文本颜色。 插件:{ 传奇: { 标签: { 生成标签:(
我正在尝试设置使用 Chart.js 制作的图表的画布大小。它没有调整大小。 让 ctx= document.createElement("canvas") ctx.宽度 = 200 ctx.高度 = 100 document.body.appendChild(ct...
当从 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 (日语)
如何使用reactjs在chart.js中的甜甜圈图表上显示速度计
我创建了一个半圆环图,想像速度计一样显示,但无法实现。我已浏览此链接,我想显示我的图表 与上面的链接类似...
我尝试改编一个简单的chartjs代码,以便根据选择字段中的值修改时间显示到我的html页面中。事实是我不明白为什么所选的值没有链接......
我尝试在图表区域内使用缩放,但是放大会导致缩放使用整个图表区域而不是 X 轴和 Y 轴内的缩放。 var 任意行 = { ...
我尝试找到一种方法将txt文件中的数据使用到chart.js图形中。 我对 JS 不太友好,所以我请求一些帮助...... 所以,我成功的是使用以下代码构建了一个漂亮的简单图表: ...
ChartJS:用不同的颜色填充高于最大值、介于最大值/最小值之间以及低于最小值限制的曲线数据集
Rails 5、ChartKick 5.0.5 => ChartJS 4.4.1 我在 ChartJS 中有一个曲线图,它在 Y 轴上绘制大约 0 的值,并具有单独的正值最大阈值和负值最小阈值...
为了清晰和隐私,我更改了数据主题,但我的实际问题是相同的。 我有按地区组织的 CSV 格式的数据,所有格式如下: 加拿大.csv: 是的...
我正在使用Haml。 所以代码是这样的: = pie_chart @chart_ ratings,甜甜圈:true,后缀:“%”,加载:“正在生成图表...”,下载:true,宽度:“350px”,库:{
我有这个非常有用的图表,但我的问题是客户想要显示百分比标签。 我在下面附上了我想要的图片: <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><html> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> <body> <canvas id="myChart" style="width:100%;max-width:600px"></canvas> <script> const xValues = ["Italy", "France", "Spain", "USA", "Argentina"]; const yValues = [55, 49, 44, 24, 15]; const barColors = ["red", "green","blue","orange","brown"]; new Chart("myChart", { type: "bar", data: { labels: xValues, datasets: [{ backgroundColor: barColors, data: yValues }] }, options: { legend: {display: false}, title: { display: true, text: "World Wine Production 2018" } } }); </script> </body> </html> </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 = ["Italy", "France", "Spain", "USA", "Argentina"]; const yValues = [55, 49, 44, 24, 15]; const barColors = ["red", "green","blue","orange","brown"]; const total = yValues.reduce((acc, val) => acc + val, 0); new Chart("myChart", { type: "bar", data: { labels: xValues, datasets: [{ backgroundColor: barColors, data: yValues }] }, options: { legend: {display: false}, title: { display: true, text: "World Wine Production 2018" }, animation: { onComplete: function () { const ctx = this.chart.ctx; ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily); ctx.fillStyle = "red"; ctx.textAlign = 'center'; ctx.textBaseline = 'bottom'; this.data.datasets.forEach(function (dataset) { for (let i = 0; i < 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("%", model.x + 15, model.y - 5); } }); } } } }); </code></pre> <p><strong>更新</strong></p> <p>我不知道我的理解是否正确。我假设您想向图表添加新数据...如果是这样,则需要更新数组。将数据与条形和颜色值相关联。我想这就是当客户想要添加一些东西时你的意思。然后更新 <pre><code>dataset</code></pre> 数组。</p> <pre><code>const xValues = ["Italy", "France", "Spain", "USA", "Argentina", "New1", "New2"]; const yValues = [55, 49, 44, 24, 15, 12, 99]; const barColors = ["red", "green","blue","orange","brown", "bronze", "purple"]; const total = yValues.reduce((acc, val) => acc + val, 0); new Chart("myChart", { type: "bar", data: { labels: xValues, datasets: [{ backgroundColor: barColors, data: yValues }] }, options: { legend: {display: false}, title: { display: true, text: "World Wine Production 2018" }, animation: { onComplete: function () { const ctx = this.chart.ctx; ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily); ctx.fillStyle = "red"; ctx.textAlign = 'center'; ctx.textBaseline = 'bottom'; this.data.datasets.forEach(function (dataset) { for (let i = 0; i < 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("%", 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>
我在图表js方面遇到了一个非常烦人的问题,我已经被困了好几天了,我已经尝试了几乎所有的方法,但还无法弄清楚。 问题是,我使用的是简单的 TypeScript 环境...
我的图表对象定义如下: this.chart = new Chart("myChart", { 类型:'甜甜圈', 数据: { 数据集:[ { 标签:标签数据, ...
我的数据库中有许多记录,其状态更改已经过审核。我正在提取这些数据以显示在 Chart.js 水平条形图中,以可视化每条记录的持续时间......
我的图表对象定义如下: this.chart = new Chart("myChart", { 类型:'甜甜圈', 数据: { 数据集:[ { 标签:标签数据, ...
我正在使用chartjs(v3)(和react-chartjs来集成)创建折线图,并且我在自定义线以从第一列的中间开始(并且也在