有哪些算法可以为图形上的绘图线选择颜色？

19

我对可以以编程方式实现的用于生成绘图线的RGB或HSV颜色，以使其在视觉上与相邻像素不同的算法或规则感兴趣。

我知道在专业地图制作中，有一些算法或规则可确保地图上没有两个相邻的国家/地区使用相同的颜色。我也可以认为Microsoft Office Excel可以为绘图线（红色，蓝色，紫色/橙色）选择良好的色调/阴影。

这是我正在谈论的示例-我需要为黑色背景上的12条线生成颜色。我使用网络安全的RGB颜色代码手动对此处的颜色进行了硬编码。当这些线重叠时会出现问题-很难分辨是看着紫色，还是略深的紫色或紫色。我正在寻找一种更好的算法来为此类绘图线生成颜色。

多条绘图线颜色示例

这是一个使用Flot绘图库进行jQuery的示例，它具有一系列漂亮的图形颜色：在此处输入图片说明

algorithms color

— 亚历克斯·斯通
source

2

这里有两个相关的问题：programmers.stackexchange.com/questions/44929/...和stackoverflow.com/questions/470690/...

— 弗雷德里克Deweerdt

看来他们只是选择了底色。在此图表中，您只有5条线，而其他示例有12条。如果让Flot具有更多图形，则很可能会遇到类似的问题。仅有许多不同的颜色，从那里必须重复阴影，并且只能尝试在它们之间保持一定的“距离”。

— thorstenmüller'13

1

尽管这里有一个非常有趣（且很好）的问题，但从实际实现的角度来看，我还是会强烈建议您使用一个合理的最大数量（在变得不可读之前）-32或128种左右的颜色（取决于应用程序），并使用该数组索引而不是尝试计算下一种颜色。

15

我建议使用HSV或HSL颜色空间，而不是RGB颜色空间，因为HSV和HSL的结构更好，可生成看起来与人类不同的颜色。您将在RGB上做更多的工作（尽管存在来回转换，如果需要的话）。

这就是HSV / HSL的样子：在此处输入图片说明

在使用HSV或HSL色彩空间时，您可以（非常粗略地）假设两种颜色的H（色相）分量之间的差异很好地近似了两种颜色之间的感知距离-即色相变化越大，则不同的颜色将呈现给人类。您也可以尝试使用S（饱和度）和L / V（亮度/值）来产生更多其他非常不同的颜色，但是对于相同的值更改而言，它们看起来并不像改变色相一样。

根据所需的不同颜色的数量，可以将色相空间划分为该数量的不同颜色。例如，如果色相范围为256个值，并且需要16种不同的颜色，则第一种颜色可能是（0，128，128），第二种颜色是（16，128，128），依此类推。我在这里中间随意选择了一些S / L值，因为通常它们很轻且饱和，足以清楚地看到颜色差异。该系统很简单，并且假定您对图形/地图中的颜色邻接一无所知。

如果您事先不知道需要多少种不同的颜色，但您知道上限，并且将色相范围划分为考虑到上限的颜色，如上所述，仍然可以给您提供良好的感知上不同的颜色，那么您可以使用相同的系统上限。

如果（可能）需要非常多种不同的颜色，则只要它们不会出现在图形中具有相似颜色的其他元素附近，您仍然可以避免使用非常相似甚至相同的颜色。这需要了解您要绘制的图形中的邻接情况，并且可能并不总是那么直接，即使那样，正如Dukeling在评论中指出的那样，可能也不是一个好主意：使用相同的颜色可能会使观众感到困惑在图表中针对两个不同的概念两次。

因此，最后在最复杂的情况下，您的图形非常复杂，以至于您没有足够的色彩空间来确保最终不会出现使用上述系统时颜色过于相似的独特元素。在这种情况下，您需要构建可视化图元素的邻接图。邻接关系是一个模糊的概念-您将必须根据实际情况正确定义它。例如，在您的第二个示例中，7月12日的数据有一个阻塞点，其中每种颜色彼此相邻。如果可以建立邻接图，一种可以帮助您的方法是图形着色问题-有一些库可以为您提供帮助-例如C ++中的boost :: graph。

— 乔里斯·蒂默曼斯
source

无论是否有交叉点，您都不希望相同的颜色在单个图形上代表不同的事物（如果您要暗示的是），则存在太多的混淆空间，您可能无法找出哪个是哪个。，因此图形着色是无关的。以防万一，您不会注意到，每条线只有一种颜色，并且由一系列相连的点组成。

— 2013年

@Dukeling-您误会了我的观点。在某个时候，无论选择多么谨慎，如果需要许多不同的颜色，您将开始拥有看起来相似的颜色（例如问题中第一张图片中的紫色）。到那时，像我建议的那样简单但简单的实现可能会将这些颜色放在一起，很难看清发生了什么。那时，您可以使用图形着色来确保对图形上的“闭合”线使用远距离颜色。

— 约里斯·蒂默曼斯

@Dukeling-我已经编辑了答案，以包括您对为什么重复使用相同颜色可能不好的评论。

— 乔里斯·蒂默曼斯

1

对于事先不知道有多少种不同颜色的情况，您需要另一个有趣的算法是黄金比例算法。

只需从您最喜欢的颜色开始，然后以黄金角（137.5°）的步调围绕色轮。有了这个角度，您将确保在色轮周围的每次卷积之后，新颜色都落在您已经创建的颜色之间。

（图片来自维基百科）

— 罗马·赖纳
source

0

我进行了一些实验，发现即使使用HSL / HSV，要获得一种不错的算法来获得不错的，不干扰的，平静的效果（都相当主观，但是...）却具有对比色，并不是一件容易的事。幽灵的某些部分在视觉上是相似的-尤其是。绿蓝色部分。因此，我必须添加一些亮度变化。

我最终得到的是：

$.plot($('#application_pie'), data_application_pie, {
    series: { pie: { show: true,  innerRadius: 0.55, offset: { top: 0, left: -120 } } },
    colors: $.map( data_application_pie, function (item, index) {
        return jQuery.Color({
            hue: (index*0.95*360/data_application_pie.length),
            saturation: 0.95,
            //lightness: (index%2/-4)+0.55, alpha: 1
            lightness: ((index%4 == 3 ? 1:0)/-4)+0.55, alpha: 1
        }).toHexString();
    })
});

— OndraŽižka
source