如何使用Chart.js限制数组JSON中现有onject的数量? 假设我在一个数组中有120个对象,那么我只想在Chart.js中仅显示10个数据。 我的数据存在于limitToLast=10 ,我尝试使用limitToLast=10 ,但是不显示任何数据,这是我的代码。

 <!DOCTYPE html> <html lang="en"> <head> <script src="JS/jquery-3.2.1.min.js"></script> <style> canvas{ -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } </style> </head> <body> <div class="container" style="width: 90%;"> <canvas id="canvas"> </canvas> </div> <script> $.getJSON("https://skripsi-adeguntoro.firebaseio.com/sensor1.json", function (json) { console.log(json); var temp = json.map(function(item) { return item.temp; }); var time = json.map(function(item) { return item.time; }); var date = json.map(function(item) { return item.date; }); console.log(date); console.log(time); console.log(temp); var config = { type: 'bar', data: { labels: time, datasets: [{ label: "My First dataset", backgroundColor: "rgba(220,220,220,1)", borderColor: "rgba(220,200,230,1)", data: temp, fill: false, }] }, options: { responsive: true, title:{ display:true, text:'Chart.js Line Chart' }, tooltips: { mode: 'index', intersect: false, }, hover: { mode: 'nearest', intersect: true }, scales: { xAxes: [{ display: true, scaleLabel: { display: true, labelString: 'Time' } }], yAxes: [{ display: true, scaleLabel: { display: true, labelString: 'Temperature' }, ticks: { beginAtZero: false, stepSize: 5 } }] } } }; window.onload = function() { var ctx = document.getElementById("canvas").getContext("2d"); window.myLine = new Chart(ctx, config); }; }); </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> </body> </html> 

谢谢您帮忙。

  ask by Elonelon translate from so

本文未有回复,本站智能推荐: