如何基于数值为SingleDivUI柱状图动态设置柱子颜色？

核心思路 #

遍历成绩数组，根据自定义的分数规则（比如及格线、分数段）动态生成对应颜色数组，替换原本手动指定的barColor值，实现柱子颜色随分数自动变化。

修改后的完整代码 #

JavaScript部分 #

// 定义颜色判断规则：可根据需求调整分数阈值和对应颜色
const getBarColor = (score) => {
  // 示例：60分及格，及格用绿色，不及格用橙色
  return score >= 60 ? "#449647" : "#eb6236";
};

const scores = [55, 74, 25, 58, 51, 45];
const options = {
    type: "bar",
    data: {
        labels: ["Sub 1", "Sub 2","Sub 3","Sub 4","Sub 5","Sub 6"],
        series: {
            points: scores,
            // 遍历成绩数组，动态生成颜色数组
            barColor: scores.map(getBarColor)
        }
    },
    graphSettings: {
        yAxis: {
            startFromZero: true,
            maxTicks: 10,
            customScale: {
                min: 0,
                max: 100,
                interval: 10
            }
        }
    }
};

const { Chart } = SingleDivUI;
new Chart('#chart-demo', options);

CSS部分（无需修改） #

body {
  padding-left: 30px;
  height: 100%;
}

HTML部分（无需修改） #

<link href="https://unpkg.com/singledivui/dist/singledivui.min.css" rel="stylesheet" />
<script src="https://unpkg.com/singledivui/dist/singledivui.min.js"></script>

<div id="chart-demo"></div>

细节说明 #

• getBarColor函数：负责根据单个分数返回对应颜色，你可以直接扩展规则实现多分数段配色，比如：

  const getBarColor = (score) => {
    if (score >= 90) return "#2ecc71"; // 优秀
    if (score >= 70) return "#449647"; // 良好
    if (score >= 60) return "#f39c12"; // 及格
    return "#eb6236"; // 不及格
  };
  

• scores.map(getBarColor)：利用数组map方法批量处理所有成绩，生成和成绩数组长度完全匹配的颜色数组，无需手动逐个指定颜色，新增科目时也能自动适配。

内容的提问来源于stack exchange，提问作者Ishika35