Charts.js - 值间隔的条形图不同颜色不起作用答案

【问题标题】：Charts.js - Bar chart different colors for value intervals not workingCharts.js - 值间隔的条形图不同颜色不起作用
【发布时间】：2021-07-15 22:26:44
【问题描述】：

我正在从 JSON 中读取一些数据，并使用 Charts.js 绘制值与时间的关系图。但是，我无法解决两件事：

我无法读取最后 20 个元素
我无法使条形图根据值改变颜色

关于 1，我已经设法使用 return key<20; 读取了前 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 => x.x),
                    datasets: 
                    [{ 
                        data: dataPoints1.map(y => y.y),
                        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>

【问题讨论】：

标签： javascript html loops charts chart.js

【解决方案1】：

要显示边框颜色，您需要将边框宽度设置为大于 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 => x.x),
          datasets: [{
            data: dataPoints1.map(y => y.y),
            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>

【讨论】：

工作就像一个魅力。非常感谢！