10

目前，我正在开展一个项目，将州数据与另一个国家的数据进行比较。一个数据点是受保护土地的百分比，我想填写与数据点匹配的州百分比。例如，如果北卡罗来纳州 25% 的地区受到保护，那么我希望该州 25% 的地区能够填补。目前，我正在尝试使用 svg，我希望在页面加载时进行填充。

任何有关如何执行此操作的建议或资源将不胜感激。

我在 Illustrator 中绘制的示例：

NC 填写 33%

4

4 回答 4

2

这是我的两分钱：

你可以有一个像这样的线性渐变：

<linearGradient y2="0%" x2="100%" y1="0%" x1="0%" id="F1g"><stop stop-color="#00FF00" offset="0%" id="F1gst1"/><stop stop-color="#FFFFFF" offset="0%" id="F1gst2"/></linearGradient>

然后取第一个停止元素：

var firstStop = document.getElementById('F1gst1');

然后使用属性偏移指定要填充的百分比：

percentage = '35%'; firstStop.setAttribute('offset',percentage);

这就是javascript中的方式。您需要每个状态的渐变（您可以使用一个组），也许您需要定义一个路径对象，并在每个状态内以相同的形式填充，因此您可以将线性渐变应用于该路径填充属性。

如果你需要一个动画，你可以设置一个 setInterval，每 x 毫秒添加一个 '1%' 来制作效果，并在达到所需百分比时停止每个间隔。

我希望这至少给了你一个线索。

问候。

于 2014-02-28T14:04:06.807 回答
2

这可以通过纯 css 和 html 来完成：http: //jsfiddle.net/haohcraft/rAPN5/1/

基本上，诀窍是

  1. 您需要一个具有透明内场但不透明外场的图像，就像小提琴中的图像一样。并且您需要设置z-index:1才能将其放置在filled <div>.
  2. 在这种情况下设置filled <div>和。imgposition: absolute; width:90px; height:90px;
  3. 然后你可以调整 的height来filled div显示百分比
于 2014-07-17T03:23:08.253 回答
0

好吧，这是 Canvas 中的一种非常愚蠢的方式......（我假设你的意思是你想要填充一定百分比的内部区域）。

第 1 步：将每个状态的实体图像转储到 Canvas

第 2 步：计算非零像素的数量

第 3 步：使用边缘提取卷积提取边缘

第 4 步：对于每一行，在形状内的每一行内水平迭代，以像素为单位着色，直到达到您想要描绘的形状的 x%。

可以在 SVG 中执行此操作，但您需要手动细分形状，跟踪所有区域，然后手动计算要填充的区域，它不会做我认为您想要的 - 即有一个状态填满就像它是一个水容器？

当然，另一种解决方案是 3D 打印所有 50 个州形状的透明容器，用彩色水填充到所需的水平。拍摄它们，然后通过 SVG 滤镜（feImage + feColorMatrix+feComposite）处理该图像，以选择性地填充 SVG 图像。这可能比学习曲面细分（或 Canvas）更快。

于 2013-04-09T06:51:11.860 回答
0

ProgressBar 看起来很有前途且易于使用： https ://kimmobrunfeldt.github.io/progressbar.js/

这是一个很好的小提琴示例： https ://jsfiddle.net/kimmobrunfeldt/72tkyn40/

Javascript：

// progressbar.js@1.0.0 version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/

var bar = new ProgressBar.Circle(container, {
  color: '#aaa',
  // This has to be the same size as the maximum width to
  // prevent clipping
  strokeWidth: 4,
  trailWidth: 1,
  easing: 'easeInOut',
  duration: 1400,
  text: {
    autoStyleContainer: false
  },
  from: { color: '#aaa', width: 1 },
  to: { color: '#333', width: 4 },
  // Set default step function for all animate calls
  step: function(state, circle) {
    circle.path.setAttribute('stroke', state.color);
    circle.path.setAttribute('stroke-width', state.width);

    var value = Math.round(circle.value() * 100);
    if (value === 0) {
      circle.setText('');
    } else {
      circle.setText(value);
    }

  }
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';

bar.animate(1.0);  // Number from 0.0 to 1.0
于 2018-02-24T07:21:06.060 回答