javascript - 如何创建自定义形状的图表？

Question

我需要创建一个具有自定义形状的图形。例如：为了代表人口，我需要创建一个人形，在其中我将显示统计数据和数据。是否有任何 javascript 库可以帮助我做到这一点？D3 js会帮助我吗？

任何帮助表示赞赏。

谢谢你。

Answer 1

您甚至可以尝试使用这种使用两个图像并相互叠加的方法。

假设您想要一个人类字体图标作为图表，使用http://fa2png.io/将图标转换为 .png 图像，然后在下面的代码中使用它。

http://codepen.io/FDfranklin/pen/yGbCK

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<div class="container">
    <div class="bw"></div>
    <div class="show"></div>
    <div id="bar" data-total="100">
        <div class="text">Currently at <br/><span>70</span><br><i>Click To Give</div>
    </div>
</div>

@import url( http://fonts.googleapis.com/css?family=Concert+One );

html, body {
  margin: 0 auto;
}

.container {
  width:450px;
  height:328px;
  position:relative;
  display:inline-block;
  vertical-align:top;
  background-clip:content-box;
}
.bw {
  width:100%;
  height:100%;
  position:absolute;
  bottom:0; background:url(http://fdfranklin.com/usf-bull-bw.png) fixed left top;
  background-clip:content-box;
}
.show {
  width:100%;
  height:0%;
  position:absolute;
  bottom:0; background:url(http://fdfranklin.com/usf-bull.png) fixed left top;
  background-clip:content-box;
}

#bar {
  width: 100%;
  height: 0%;
  position: absolute;
  bottom: 0;
  border-top: 1px dashed black;

  .load {
      opacity: 1;
    }


  div {
    position: absolute;
    line-height: 22px;
    width: 110px;
    top: -40px;
    right: -113px;
    font-family: arial, sans-serif;
    font-size: 16px;
    text-align: center;
    color: white;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #2f574b;
    transition: background 700ms ease-in-out;
    opacity: 0;
    -webkit-transition: opacity 3s ease-in, background 700ms ease-in-out;
    -moz-transition: opacity 3s ease-in, background 700ms ease-in-out;
    -o-transition: opacity 3s ease-in, background 700ms ease-in-out;
    -ms-transition: opacity 3s ease-in, background 700ms ease-in-out;
    transition: opacity 3s ease-in, background 700ms ease-in-out;

      &:hover {
      background: #B1A875;
    }

    span {
      font-family: 'Concert One', sans-serif;
      line-height: 30px;
      font-size: 34px;
      color: #white;;
    }
  }
}

<script>
percent = $('#bar div span').html();
total = $('#bar').attr('data-total');
percentStart = 0;

setInterval(function() {
  $('.show').css('height',percentStart/total*100+'%');
  $('#bar').css('height',percentStart/total*100+'%');
  $('#bar div span').html('%'+percentStart);
  if(percentStart<percent) {percentStart=percentStart+1;}
},35);

$("#bar div").addClass("load");

</script>

Answer 2

我不知道“人形”的东西，我认为没有任何工具可以做到这一点。

然而，我遇到的最好和最接近的资源是Highcharts它有各种各样的饼图、样条曲线、条形图等。您需要交互式地绘制数据。

我还建议您查看Google Charts。Highcharts 不提供的一件事是基于地图的数据绘图。谷歌有一种称为GeoMap的东西，用于绘制数据，其位置与全球某个小镇一样具体

Answer 3

或者，一种简单的方法是设置重复的背景图像并根据您的计数更改 DIV 宽度/高度。好处是在任何浏览器中几乎没有性能损失，因为 DIV 高度和重复图像背景都经过了相当优化。

想法是选择一个瓷砖尺寸（例如：25 x 11）并将其分成两个 DIV。在上图中，第一个 DIV 在视觉上负责两行，因为它们没有被分解（最大宽度）。第二个 DIV 显示最后一行，因为它的宽度表示部分数字。

function draw_guys( num, row_width ) {
    var whole = Math.floor( num / row_width ) * row_width;
    var rows = whole / row_width;
    var remainder = num - whole;

    // at this point, first div height should be 11 * rows,
    // and second div width should be remainder * 25
    // $("div1").css( ... etc.
}

有关工作示例，请参阅此 Facebook IPO 计算器：http ://www.voanews.com/content/how-long-would-it-take-you-to-earn-as-much-as-facebook-shareholders/667093 .html

Answer 4

有许多 javascript 库可以用来编写这样的东西，但是如果您发现任何“人口图”的行为与您开箱即用的描述一样，我会感到惊讶。

我最近在 RaphaelJS 中做了很多工作，根据您的用例，您可以从头开始编写一个简单的图表，只需很少的工作。考虑一下：

var figurePath = "m67.55634,478.32968c-8.13657,-2.48874 -14.5806,-8.08679 -16.4212,-14.26556c-0.73347,-2.46204 -1.08294,-52.8298 -1.08687,-156.62885l-0.00574,-152.99986l-4.12245,0l-4.12245,0l0,57.75455c0,56.61781 -0.04195,57.82326 -2.13101,61.24794c-2.70588,4.43591 -5.74459,6.5144 -11.69161,7.99719c-8.79226,2.19217 -18.40762,-1.9938 -21.86059,-9.51678c-2.22165,-4.84039 -2.07695,-133.9393 0.15908,-141.94215c5.04025,-18.03902 21.36259,-32.81751 40.39913,-36.578c10.0279,-1.98091 102.7426,-2.00536 112.74093,-0.02971c10.18434,2.01237 18.93166,6.56422 26.67169,13.87918c7.96135,7.52412 11.67772,13.62765 14.44972,23.73145c1.93217,7.04254 2.03873,10.81412 2.03873,72.15891c0,56.07582 -0.21188,65.2007 -1.58522,68.26476c-2.13536,4.76425 -4.33276,6.9068 -9.23622,9.00589c-8.13713,3.48325 -18.47925,1.24234 -23.2908,-5.04663l-2.47462,-3.23438l-0.28067,-58.8461l-0.2807,-58.84612l-4.09941,0l-4.09944,0l0,153.75127c0,168.54004 0.40904,157.34918 -5.98071,163.62524c-5.04742,4.95758 -10.19456,6.83295 -18.75407,6.83295c-8.55949,0 -13.70664,-1.87537 -18.75407,-6.83295c-6.26537,-6.1539 -5.98071,-1.38409 -5.98071,-100.21561l0,-90.34155l-4.12245,0l-4.12248,0l0,90.34155c0,73.62247 -0.25719,90.91376 -1.38974,93.4332c-2.07629,4.61884 -6.59314,9.17279 -11.33463,11.42776c-4.56992,2.17331 -14.94501,3.1835 -19.23141,1.87241zm23.18207,-395.70253c-12.45886,-4.14828 -20.1591,-10.54255 -25.6095,-21.26616c-3.01675,-5.93541 -3.23429,-7.07562 -3.23429,-16.95192c0,-9.99342 0.18727,-10.94311 3.33264,-16.8991c15.71025,-29.74877 61.06589,-29.82171 76.74945,-0.12342c3.24734,6.14913 3.39783,6.92425 3.39783,17.50292c0,10.17379 -0.23299,11.51108 -2.88087,16.53765c-4.4481,8.44392 -11.01797,14.60091 -19.99178,18.73535c-6.96733,3.21001 -8.73656,3.60972 -17.18201,3.8817c-7.08677,0.2282 -10.69254,-0.12219 -14.58147,-1.41702z";

var figure = canvas.path( figurePath )
    .attr( { fill: 'red', stroke: 'black', 'stroke-width': 3, transform: 'S0.86,0.85 0,0 T0,0', 'fill-opacity': 0, 'stroke-opacity': .5 } )
    .animate( { 'fill-opacity': 0.5, 'stroke-opacity': 1.0, transform: 'S1,1 0,0' }, 1000, '>', function()
        {
            var text = canvas.text( 100, 150, "Population:\n10,250" )
                            .attr( { 'font-size': 16, fill: 'black', stroke: 'none', 'font-weight': 400, 'font-family': 'Arial,Helvetica,sans-serif', 'fill-opacity': 0 } )
                            .animate( { 'fill-opacity': 1.0 }, 1000 );
        } );

var figure2 = canvas.path( figurePath )
    .attr( { fill: 'blue', stroke: 'black', 'stroke-width': 3, transform: 'S0.43,0.43 0,0 T250,125', 'fill-opacity': 0, 'stroke-opacity': .5 } )
    .animate( { 'fill-opacity': 0.5, 'stroke-opacity': 1.0, transform: 'S0.6,0.6 0,0 T250,100' }, 1000, '>', function()
        {
            var text = canvas.text( 312, 190, "Population:\n6,632" )
                            .attr( { 'font-size': 12, fill: 'black', stroke: 'none', 'font-weight': 400, 'font-family': 'Arial,Helvetica,sans-serif', 'fill-opacity': 0 } )
                            .animate( { 'fill-opacity': 1.0 }, 1000 );
        } );        

或者，查看小提琴：

- http://jsfiddle.net/kevindivdbyzero/McSzB/
- http://jsfiddle.net/kevindivdbyzero/mSX8e/2/