Question

我尝试了一个数组，但似乎无法正常工作，我只需要将绿色设置为> 10，将红色设置为<10，将橙色设置为11，将不胜感激。

这是我正在使用的代码，但它不断显示“ i”错误我没有那么丰富的经验，所以如果这是一个简单的解决方法，我会不明智地

var barChartData = {
labels: [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", 
"21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", 
"33", "34", "35", "36", "37", "38", "39", "40", , , , , , , , , , , , 
],
datasets: [

{
  label: "Voltage",
  backgroundColor: "lightgreen",
  borderColor: "green",
  borderWidth: 1,
  data: [4, 7, 3, 6, 10, 7, 4, 6, 3, 5, 6, 7, 3, 14, 6, 7, 7, 2, 5, 6, 7 ,4, 
  9, 8, 3, 2, 8, 7, 3, 15, 6, 7, 3, 5, 6, 7, 7, 2, 5, 6]

},


]

};



var chartOptions = {
responsive: true,
maintainAspectRatio: false,
legend: {
position: "top"
},
title: {
display: true,
text: "String 1"
},
scales: {
yAxes: [{
  ticks: {
    beginAtZero: true
  }
}]
}
}

var bars = barChartData.datasets[0].bars;
for (i = 0; i < bars.length; i++) {
var color = "green";
console.log(bars);
if (bars[i].data < 10) {
    color = "red";
} else if (bars[i].data = 11) {
    color = "orange"

} else {
    color = "green"
}

bars[i].fillColor = color;

}
barChartData.update(); //update the chartenter code here

Answer 1

我已经从chart.js网站上提取了示例，并进行了一些演示。

我利用了地图功能，您可以检出here

希望这是您的要求，我发现您的要求中存在一些小缺陷。

如果要以橙色显示11，则需要先进行检查 x > 10，因为这将返回true。

此外，如果您选中x > 10, x < 10 10，则它本身不会有大小写（我在代码中为这种情况添加了默认的黑色:)）。

演示：

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>

<canvas id="myChart" width="400" height="100"></canvas>
<script>
const dataset = [12, 19, 11, 3, 5, 2, 3, 10];

let ctx = document.getElementById('myChart').getContext('2d');
let myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: dataset.map(e => `Label: ${e}`),
        datasets: [{
            label: '# of Votes',
            data: dataset,
            backgroundColor: dataset.map(e => {
              if(e === 11) return 'orange';			// You need to check orange first as > 10 will be true and give it a green color
							if(e > 10) return 'green';
              if(e < 10) return 'red';
              return 'black';										// Return black in case nothing fits but that shouldn't be the case as 
              																	// every value is either smaller or bigger than 10... except 10 sooo :D

            }),
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>

在您的情况下：

const dataset = [4, 7, 3, 6, 10, 7, 4, 6, 3, 5, 6, 7, 3, 14, 6, 7, 7, 2, 5, 6, 7,4, 9, 8, 3, 2, 8, 7, 3, 15, 6, 7, 3, 5, 6, 7, 7, 2, 5, 6];
datasets: [

{
  label: "Voltage",
  backgroundColor: "lightgreen",
  borderColor: dataset.map(e => {
    if(e === 1) return 'orange';
    if(e > 10) return 'green';
    if(e < 10) return 'red';
    return 'black';

  }),
  borderWidth: 1,
  data: dataset,

},


]

如何使图表根据Charts.js中的值更改颜色

1 个答案:

演示：

在您的情况下：