2

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

注意事项

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

我知道我在编程语言或主机方面有点模糊，但这让我有机会打破通常的分析工具链并找出一些创新或新的解决方案。我对开源解决方案特别感兴趣，但我非常热衷于查看您可能建议的其他当前方法。

4

3 回答 3

1

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

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

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

于 2012-05-27T02:00:17.657 回答
1

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

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

但是，如果您想支持真正任意的自定义形状，事情就会变得更加困难。处理这个问题的一种方法是将复杂的“进度条”分解成“进度条”（例如，代表总进度的 10% 的温度计灯泡，然后是剩余 90% 的简单条）。

于 2012-05-25T00:49:40.603 回答
1

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

于 2012-05-04T11:17:45.560 回答