SingleDivUI 条形图：根据数值动态设置颜色教程-js教程-PHP中文网

SingleDivUI 条形图：根据数值动态设置颜色教程

聖光之護

发布： 2025-07-15 22:42:28

原创

836人浏览过

SingleDivUI 条形图：根据数值动态设置颜色教程

本教程旨在指导用户如何在 SingleDivUI 库中根据条形图的数值动态设置其颜色。针对该库在直接回调式颜色定制方面的限制，我们将采用数据预处理的方法。通过在图表渲染之前，根据数据点（如最小值）的特定条件，动态计算并生成相应的颜色数组，然后将其传递给图表配置，从而实现灵活的颜色控制，提升图表的可读性和信息表达能力。

1. SingleDivUI 条形图基础

singledivui 是一个轻量级的 javascript 图表库，它允许开发者通过简单的配置快速创建图表。对于条形图，其基本结构包含 labels（标签）和 series（系列数据），其中 series 又包含 points（数据点值）和 barcolor（条形颜色）。

初始的条形图配置通常如下所示，其中 barColor 是一个硬编码的颜色数组，每个颜色对应一个数据点：

const options = {
    type: "bar",
    data: {
        labels: ["Sub 1", "Sub 2", "Sub 3", "Sub 4", "Sub 5", "Sub 6"],
        series: {
            points: [55, 74, 25, 58, 51, 45],
            barColor: ["#449647", "#449647", "#eb6236", "#449647", "#449647", "#449647"] // 硬编码颜色
        }
    },
    graphSettings: {
        yAxis: {
            startFromZero: true,
            maxTicks: 10,
            customScale: {
                min: 0,
                max: 100,
                interval: 10
            }
        }
    }
};

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

登录后复制

这种直接指定颜色的方式无法满足根据数据值动态变化的场景，例如，我们希望分数低于某个阈值的条形显示为红色，或者最低分显示为特殊颜色。

2. 动态颜色设置策略：数据预处理

由于 SingleDivUI 库在图表渲染时对每个条形提供动态颜色回调的能力有限，我们必须在图表初始化之前，通过 JavaScript 逻辑预先计算并生成 barColor 数组。这种方法的核心思想是：根据 points 数组中的数值，遍历并判断每个数据点是否满足特定条件，然后相应地填充 barColor 数组。

以突出显示最低分为例，其步骤如下：

初始化数据数组：准备好 points 数组（数值数据）和 barColor 数组（初始颜色，通常为默认色）。
查找特定值：找出 points 数组中的最低值。
确定索引：获取最低值在 points 数组中的索引。
更新颜色数组：根据找到的索引，在 barColor 数组中对应位置设置特殊颜色。
传递给图表配置：将处理后的 points 和 barColor 数组传递给 options 对象。

3. 实现动态颜色设置

以下是具体的 JavaScript 代码实现，它演示了如何将最低分（本例中为25）的条形颜色设置为橙色（#eb6236），而其他条形保持绿色（#449647）：

Remove.bg

AI在线抠图软件，图片去除背景

102

查看详情

// 1. 初始化数据数组
var points = [55, 74, 25, 58, 51, 45];
// 假设所有条形默认颜色为绿色
var barColor = ["#449647", "#449647", "#449647", "#449647", "#449647", "#449647"];

// 2. 查找特定值（这里是最小值）
var min = Math.min(...points); // 使用扩展运算符找到数组中的最小值

// 3. 确定索引
const index = points.indexOf(min); // 获取最小值在数组中的索引

// 4. 更新颜色数组
// 将最低分对应的条形颜色更新为橙色
barColor[index] = "#eb6236";

// 5. 构建图表配置对象，并传入预处理后的数据
const options = {
    type: "bar",
    data: {
        labels: ["Sub 1", "Sub 2", "Sub 3", "Sub 4", "Sub 5", "Sub 6"],
        series: {
            points: points, // 使用处理后的 points 数组
            barColor: barColor // 使用处理后的 barColor 数组
        }
    },
    graphSettings: {
        yAxis: {
            startFromZero: true,
            maxTicks: 10,
            customScale: {
                min: 0,
                max: 100,
                interval: 10
            }
        }
    }
};

// 初始化并渲染图表
const { Chart } = SingleDivUI;
new Chart('#chart-demo', options);

登录后复制

4. 完整代码示例

为了使上述 JavaScript 代码能够运行，还需要相应的 HTML 结构和 CSS 样式。

HTML (index.html):

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SingleDivUI 动态条形图颜色</title>
    <!-- 引入 SingleDivUI 样式表 -->
    <link href="https://unpkg.com/singledivui/dist/singledivui.min.css" rel="stylesheet" />
    <style>
        body {
            padding-left: 30px;
            height: 100%;
        }
        #chart-demo {
            width: 80%; /* 示例宽度 */
            height: 400px; /* 示例高度 */
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>学生成绩条形图</h1>
    <div id="chart-demo"></div>

    <!-- 引入 SingleDivUI 脚本 -->
    <script src="https://unpkg.com/singledivui/dist/singledivui.min.js"></script>
    <script>
        // 将上述 JavaScript 代码放置在此处
        // 1. 初始化数据数组
        var points = [55, 74, 25, 58, 51, 45];
        // 假设所有条形默认颜色为绿色
        var barColor = ["#449647", "#449647", "#449647", "#449647", "#449647", "#449647"];

        // 2. 查找特定值（这里是最小值）
        var min = Math.min(...points); // 使用扩展运算符找到数组中的最小值

        // 3. 确定索引
        const index = points.indexOf(min); // 获取最小值在数组中的索引

        // 4. 更新颜色数组
        // 将最低分对应的条形颜色更新为橙色
        barColor[index] = "#eb6236";

        // 5. 构建图表配置对象，并传入预处理后的数据
        const options = {
            type: "bar",
            data: {
                labels: ["Sub 1", "Sub 2", "Sub 3", "Sub 4", "Sub 5", "Sub 6"],
                series: {
                    points: points, // 使用处理后的 points 数组
                    barColor: barColor // 使用处理后的 barColor 数组
                }
            },
            graphSettings: {
                yAxis: {
                    startFromZero: true,
                    maxTicks: 10,
                    customScale: {
                        min: 0,
                        max: 100,
                        interval: 10
                    }
                }
            }
        };

        // 初始化并渲染图表
        const { Chart } = SingleDivUI;
        new Chart('#chart-demo', options);
    </script>
</body>
</html>

登录后复制

5. 注意事项与总结

通用性：本教程中以“最低分”为例，但这种数据预处理的思路是通用的。你可以根据实际需求修改逻辑，例如：
- 阈值判断：if (value < 60) { color = "red"; } else { color = "green"; }
- 区间判断：if (value >= 90) { color = "blue"; } else if (value >= 75) { color = "green"; } else { color = "orange"; }
- 最高值/平均值等：使用 Math.max()、循环计算平均值等方法。
库的限制：某些图表库（如 SingleDivUI 在本例中）可能不直接提供基于数据点值的颜色回调函数。在这种情况下，数据预处理是一种非常有效且常用的解决方案。
性能考量：对于大规模数据集，预处理的计算开销可能需要考虑。但对于常见的数据量，这种方法通常不会造成明显的性能问题。
代码可读性：将颜色计算逻辑封装成独立的函数，可以提高代码的可读性和复用性，特别是在有多种颜色规则需要应用时。