图表Js-基于值全局设置的条形图颜色

Question

我想生成一个包含多个条形图的页面，并根据数组中的值全局设置每个颜色！

这是我到目前为止的代码。.它可以使用其中一个值并将其分配给所有小节！我需要它在哪里将RED分配为FALSE，将GREEN分配为TRUE

var win = simpleData[0].myWin;  //array containing either true or false
var myBorderColors = [];

    $.each(win, function (index, value) {
        if (value == true) {
            myBorderColors[index] = "rgba(0, 177, 106, 1)";
        } else {

            myBorderColors[index] = "rgba(207, 0, 15, 1)";
        }
});

Chart.defaults.global.elements.rectangle.backgroundColor = myBorderColors;

Answer 1

给定名为[win]的array包含boolean值，您可以使用array如下创建“ myBorderColors” Array.map。

Array.map

然后对var myBorderColors = win.map(b => b ? "rgba(0, 177, 106, 1)" : "rgba(207, 0, 15, 1)"); 使用以下分配。

Chart.defaults

请查看下面的可运行代码段。

Chart.defaults.global.datasets.bar.borderColor = myBorderColors;

var win = [true, false, false, true];
var myBorderColors = win.map(b => b ? "rgba(0, 177, 106, 1)" : "rgba(207, 0, 15, 1)");

Chart.defaults.global.datasets.bar.borderColor = myBorderColors;

new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C', 'D'],
    datasets: [{
      label: "My Dataset",
      data: [3, 5, 4, 2],
      borderWidth: 3
    }]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

canvas {
  max-width: 300px;
}