将百分比值显示为自定义形状的填充

Question

我正在寻找一些新的选项，用于显示百分比值作为自定义形状的填充。考虑效果类似于传统仪表板UI意义上的“进度温度计”。

考虑

• 目标 - 显示自定义报告的百分比值的图形元素。
• 格式 - 完整的图形（或信息图）本身，或通过Photoshop / InDesign甚至iBooks的PDF的一部分（作为使用它的借口）。
• 用法 - 我希望这个过程是程序化的，可以重复使用。它需要准确，我希望解决方案有点面向对象，以适用于其他数据集和图形容器。这排除了手绘图表。
• 源数据 - 目前是Excel中的数据透视表，但我可以根据需要与任何其他主机一起使用。
• Shape - 是一个源自Illustrator / Inkscape的自定义矢量形状。最终格式最适合报告的分辨率和渲染。我也会对任何其他生成形状的想法感兴趣（例如java / javascript）。
• 填充 - 我希望能够将填充表示为总面积的实际百分比（真实上升），以及垂直刻度的百分比。我想这种灵活性也有助于重用该方法作为对所选对象变量（高度，面积等）的填充值。

我知道我在编程语言或主机方面略显含糊，但这让我有机会打破常用的分析工具链，并找出一些创新或新的解决方案。我对开源解决方案特别感兴趣，但我非常希望回顾您可能建议的其他当前方法。

Answer 1

这对您来说可能有些开放，但d3.js非常强大。网站上可能有一些有用的模板，或者您可以从库中构建自己的模板。

Answer 2

如果您将自己限制为可以通过改变其中一个尺寸轻松将百分比转换为新形状的形状，则可以通过基于第一个创建第二形状来覆盖显示部分一，填充第二种形状的100％。

这显然适用于简单的形状，如正方形，矩形，圆形等，可以很容易地将“50％的面积”或“75％的高度”转换为矢量节点的操作。

但是，如果要支持真正任意的自定义形状，事情会变得非常困难。处理这种情况的一种方法是将复杂的“进度条”分解为“进度条”（例如，温度计灯泡代表总进度的10％，然后是剩下的90％的简单条形）。

Answer 3

如前所述，D3似乎可以满足您的需求 - 以下是我认为您所问的一些简单示例：

更改不同形状的填充颜色：http://jsfiddle.net/jsl6906/YCMb8/

更改简单形状的“填充量”：http://jsfiddle.net/jsl6906/YCMb8/1/