[英]Charts.js - Bar chart different colors for value intervals not working
我正在從 JSON 讀取一些數據，並且正在使用 Charts.js 繪制值與時間的關系圖。 但是，我無法解決兩件事：
關於 1，我設法使用 return key<20;讀取了前 20 個元素key<20; ，但我不知道如何閱讀最后一個元素。 我試過return [key.length-1,key.length-20] ，但並沒有真正起作用。 關於 2，我嘗試了其他人遇到的不同方法和 Fiddle 的一些代碼，但它不起作用。 控制台顯示chartColors中的元素。 誰能幫我解決這兩個問題？
下面的代碼工作得很好，並給出：
我想要這樣的東西：
<!DOCTYPE HTML> <html> <head> </head> <body> <canvas id="PM25">test</canvas> </body> <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4"></script> <script type="text/javascript"> var pm25 = document.getElementById('PM25').getContext('2d'); window.onload = function () { var dataPoints1 = []; $.getJSON("https://checkup-7b62e.firebaseio.com/meteo_radauti.json", function(meteo) { $.each(meteo, function(key, value){ dataPoints1.push({x: value[0], y: value[9]}); //How to make this array write the last 20 elements, and not the first 20, like it is now return key<20; }); var chartColors = { red: 'rgb(255, 99, 132)', blue: 'rgb(54, 162, 235)' }; var PM25 = new Chart(pm25, { type: 'bar', data: { labels: dataPoints1.map(x => xx), datasets: [{ data: dataPoints1.map(y => yy), label: 'PM2.5 (ppm)', backgroundColor: chartColors.blue, borderColor: "red", fill: true, responsive: true }, ]} }); var dataset = PM25.data.datasets[0]; for(i=0;i<dataset.data.length;i++){ var color="green"; if(dataset.data[i].value>40){ dataset.backgroundColor[i] = red; } else if(dataset.data[i].value>60){ dataset.backgroundColor[i] = blue; } console.log(dataset.backgroundColor[i]) } PM25.update(); })} </script> </html>
要顯示 borderColor，您需要將 borderWidth 設置為大於 0 的值，要獲取最后 20 個值，您可以使用 for 循環並在結束之前開始 20 個值。 最后對於不同的顏色條，您可以使用可書寫選項。
例子：
<!DOCTYPE HTML> <html> <head> </head> <body> <canvas id="PM25">test</canvas> </body> <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4"></script> <script type="text/javascript"> var pm25 = document.getElementById('PM25').getContext('2d'); window.onload = function() { var dataPoints1 = []; $.getJSON("https://checkup-7b62e.firebaseio.com/meteo_radauti.json", function(meteo) { for (i = meteo.length - 20; i < meteo.length; i++) { dataPoints1.push({ x: meteo[i][0], y: meteo[i][9] }); } var chartColors = { red: 'rgb(255, 99, 132)', blue: 'rgb(54, 162, 235)' }; var PM25 = new Chart(pm25, { type: 'bar', data: { labels: dataPoints1.map(x => xx), datasets: [{ data: dataPoints1.map(y => yy), label: 'PM2.5 (ppm)', backgroundColor: (ctx) => (ctx.dataset.data[ctx.dataIndex] > 60 ? chartColors.blue : ctx.dataset.data[ctx.dataIndex] > 40 ? chartColors.red : "green"), borderColor: chartColors.red, borderWidth: 1 }, ] } }); }) } </script> </html>
Charts.js - 多系列折線/條形圖上堆疊條的顏色不起作用
[英]Charts.js - Colors for stacked bar on multi-series line/bar chart are not working
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.