可视化图表设计技巧③|让可视化图表更加美观的12 个技巧！

可视化图表设计技巧③|让可视化图表更加美观的12 个技巧！

引用

少数派

1.

https://sspai.com/post/90440

在数据可视化领域，图表的美观度不仅影响观感，更关系到信息传达的效率。本文总结了12个实用技巧，从配色方案到透明度应用，帮助你设计出既专业又美观的可视化图表。

这是可视化图表设计技巧专题的最后一篇——【如何让可视化图表更加美观】，分享12个让可视化图表更加美观的小技巧！
本专题历史内容指路：
可视化图表设计技巧①|提高图表可读性的 7 个技巧和小窍门
可视化图表设计技巧②|让可视化图表更易于理解的15个技巧！
颜色是图表中最重要的因素，可以使它们更具视觉吸引力。接下来的内容同样会边操作边讲解，使用一个可视化图表模板，大家可以根据自己的习惯选择趁手的工具，这些技巧都是通用的。

1.选择合适的配色方案

在对图表的美观度进行设计时，首先要根据所分析的数据类型来选择配色方案，通常可分为三类：

• 定性配色方案：多系列数据且一个数据不依赖于另一个数据
• 顺序配色方案：图表中的颜色按颜色的强度和亮度顺序排列
• 发散配色方案：图表颜色由一组数值范围形成

①定性配色方案：

当数据具有不同的集合时，也就是为多系列数据时，定性配色方案是首选。
例如，我们可以考虑案例多系列，其中一个系列的数据点不依赖于另一个系列的数据点。对于这种情况，定性调色板非常适合。
在我所使用的模板中，可直接通过更改图表配色来实现：
如果用代码的话，参考这个：

  
[Dart] 
SfCartesianChart（
  调色板：<颜色>[Colors.grey，Colors.green]
   //... 
）  

②顺序配色方案

顾名思义，顺序配色方案是指图表中的颜色是按顺序排列的，色调相同，但颜色的强度和亮度不同。
例如，用浅绿色、绿色和深绿色形成调色板就形成了一个顺序调色板。在图表中，这适用于数据点按序列（月、年、日、数值等）的场景。
在我使用的模板中，可以通过选择【渐变色】来实现，比如想要按照水果单价的从高到低来排序，就可以选择配色对象为【按指标（单价）】，然后配色方式选择渐变色，即可实现。

如果是用代码的话，参考这个：

  
[Dart] 
SfCartesianChart（
   series ： < ChartSeries<ChartData，double>>[ 
    ColumnSeries<ChartData，double>（dataSource ：
      <ChartData> [ ChartData
         （' Jan ' ， 5000 ， Color.fromRGBO （159，227，190，1）），
         ChartData（'Feb'，6000 ， Color.fromRGBO （104，214，153，1 ）），
         //... ] ，pointColorMapper：（ ChartData sales 
    ， _ 
）= > sales.color ）] 
  // ...）
      
      
    

③发散配色方案

当数据具有数值可比性时，可以形成发散配色方案，即颜色由一组数值范围形成。如果数据点值属于该范围，则将应用该特定颜色。
也可以做成在何种双轴图，更加直观：

在我所用的模板中，同样是通过图表配色来实现的，不同的是，配色方式要选择【区间色】，然后依次设置区间的颜色和范围：

如果是用代码实现，可以参考：

  
[Dart] 
SfCartesianChart（
  系列：<ChartSeries<ChartData，double >>[ 
    BarSeries<SalesData，String>（
      onCreateRenderer：（）{ return CustomBarSeriesRenderer（）; 
      } 
    ）
  ] 
）类CustomBarSeriesRenderer扩展了BarSeriesRenderer {
   @override 
  ChartSegment createSegment （） {
     return CustomPainter（）; } 
  }
类CustomPainter扩展了BarSegment {
   @override 
  Paint getFillPaint （） { Paint
     _paint = Paint（）;
    如果（series.dataSource [currentSegmentIndex] .sales> 2）
      _paint.color = Color.fromRGBO（98，158，103，1 ） ;
     //... 
    _paint.style = PaintingStyle.fill;返回_paint ; 
  } 
}  

关于具体的配色色系搭配之类的，网上有很多配色网站，大家可以自己根据需求去学习，这主要是审美上的差异了。

2. 对标准元素使用标准颜色

始终确保为图表中的标准元素应用正确且标准的颜色。
例如，将正值指定为红色，将负值指定为绿色是不正确的。比如金融图表（OHLC、蜡烛图等）中的熊市和牛市填充颜色，正值应该是绿色，负值才应该是红色。

3. 使用对比色作为标签颜色

如果图表中某个元素被放置在另一个元素上方，那么我们应该考虑其颜色饱和度并使用对比色。否则，会导致可读性问题。
比如下面这个图，其中文本“David 30%”在右侧图表中清晰可见，但在左侧图表中不可见。

或者你也可以通过将指标值放在数据饼图的外部，然后自定义它的颜色，丙炔鼠标悬浮到对应区域后也会默认展示数据，在我的模板中类似这种：

4. 尽量减少不同颜色的使用

尽量避免在图表中使用多种颜色，对同一组数据（即同一系列中的所有数据点）使用相同的颜色。
对同一类型的数据不必要地应用多种颜色可能会让用户感到困惑。

此外，如果对图表中的所有系列应用相同的颜色，也是不正确的。每个系列应该用不同的颜色呈现，这有助于区分两个系列中的数据点。

在我使用的模板中，同样是在图表配色中自定义修改的：

5. 选择同一亮度和饱和度的颜色

在确定图表中颜色时，要选择具有相同强度的颜色，有些颜色会比其他颜色更突出，这可能会错误地将正常数据点描绘成特殊点。
比如下面这个图，在左图中，旅行数据点在其他数据点中很突出，因为它的颜色强度与其他数据点不同。这可能会错误地将旅行数据点表示为特殊数据。

6. 保持整体色系一致

数据汇报或者一组可视化报告仪表盘的所有元素保留统一的配色将带来丰富的外观，并更具视觉吸引力。为应用程序中的不同元素应用不同的颜色会降低外观，也会增加理解难度。
比如下面这个两张图，左边的明显看着更加凌乱，右边的则保持了统一性。

在我所使用的模板中，可以通过它内置的配色方案直接选择，也可以自定义设置：

如果是用代码实现，可以参考：

  
Widget 构建（BuildContext 上下文）{
  返回 Scaffold（
     body：SfChartTheme（
       data：SfChartThemeData（
         backgroundColor：Colors.grey 
      ），child：Column（
         children：<Widget>[
           SfCartesianChart（），
           SfCartesianChart（）
        ] 
      ）
    ）
  ）；
}  

7. 应用有意义的颜色

不要将一些随机的调色板应用于图表，尽量应用有意义的颜色。
例如，在下图中，我们用金色、银色和铜色来描绘奖牌。另一个很好的例子是选择一些和企业logo比较一致的配色，比如微信用绿色表示，企业微信用蓝色表示等等。

8. 设计图表以支持浅色和深色主题

如今，大多可视化工具都支持明暗主题，有些甚至还继承了系统主题。考虑到这一点，我们可以通过以下方式设计在两种主题下都好看的图表：

• 制作一两个在所有主题中都好看的通用设计。
• 根据所选主题改变设计。
  
  比如在我用的模板中，就很明显能看出两个色系：深色系和浅色系，并且也支持自定义上传新的设计封面和样式，大家可以根据自己的需求去做。

9. 检查两个主题的颜色是否一致

根据上一个小技巧，如果你打算保留通用设计（无论主题如何），要确保指定的颜色适合两个主题，也就是说尽量选择通用性更强的颜色。
例如，同样一个图表，在两个分析主题内，深蓝色在浅色主题内可以显示，但在深色主题内就无法显示了。

而选择比较通用的纯色颜色则适用于这两个主题。

10. 注意色盲细节

在选择图表颜色时，还应该考虑到色盲人士的视力。有些人可能会混淆红色和绿色，有些人会混淆蓝色和黄色。
因此可以尝试改变饱和度和强度，而不是仅通过改变颜色的色调值来制作图表配色。

网上也有很多这样的工具，大家自己去找即可。

11. 在必要的地方让元素透明

在某些情况下，图表中的某个系列可能会与另一个系列重叠，从而隐藏位于其后面的系列，为避免这种情况，可以指定具有较低不透明度的系列颜色。
例如，在下图中，产品 A 的 2004 年 y 值在左侧图表中不可见，但在右侧图表中清晰可见。
在我所使用的模板中，可以通过图表配色中的【自定义颜色】来实现：

如果用代码的话，参考这个：

  
[Dart] 
SfCartesianChart（
  系列： <ChartSeries<ChartData ，double>>[ 
    AreaSeries<ChartData，double>（颜色： const Color.fromRGBO （（53，92，125，0.6 ），
       //不透明度：0.6 ） 
    ] 
  // ... 
）
      
    

12. 使用渐变色

与纯色相比，渐变色使图表更加美观，可以使用渐变色来丰富图表的外观并传达一些额外的信息。
在下图中，通过替换纯色来应用渐变色只是为了提升外观。
这个大家适当用即可，不要贪多，不然就是喧宾夺主了，上面也给大家展示过渐变色的设置方法了，这里就不赘述。

如果用代码实现，参考：

  
[ 
       Dart ] SfCartesianChart（
  系列：<
       ChartSeries < ChartData ，
      double 
    >> 
  [ 
    AreaSeries < 
ChartData ，double > （渐变： const LinearGradient（颜色：<Color> [
         Color.fromRGBO（136，196，130，1），
         Color.fromRGBO（216，222，104，1 ），
         Color.fromRGBO（237，120，100，1 ）] 
      ，停止： <double> [ 0.0，0.4，0.8 ] ，开始：Alignment.bottomCenter ，结束： Alignment.topCenter ））] // ...）​  

希望这些技巧能帮助大家提高可视化图表的美观度，大家有什么好用的技巧也欢迎分享！
这个系列就结束啦，接下来会用业务的角度，教大家如何制作各种业务分析报表，也会涉及到一些专业的业务知识，感兴趣的朋友可以期待一下！
2
0
扫码分享