如何創建自定形圖？

Question

我需要創建一個自定義形狀的圖形。例如：爲了表示人口，我需要創建一個人體形狀，在其中顯示統計數據和數據。有沒有任何JavaScript庫可以幫助我做到這一點？ D3會幫我嗎？

任何幫助表示讚賞。

謝謝。

Answer 1

我不知道「人形」的東西，我不認爲有這樣做的任何工具。

但是，我遇到的最好和最接近的資源是Highcharts它有各種各樣的餅圖，樣條線，酒吧等，您將需要交互式繪製數據。我也推薦看看Google Charts。 Highcharts沒有提供的一件事是基於地圖的數據繪圖。谷歌有一些被稱爲GeoMap數據與地點具體爲在全球範圍內的一個小鎮上繪製信息

Answer 2

有任何數量的可以用來編寫這樣的事情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..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/ 

Answer 3

另外，這樣做的一個簡單的方法是設置重複的背景圖像，並改變根據您的計數DIV寬度/高度。好處在於，在任何瀏覽器中幾乎沒有性能影響，因爲DIV高度和重複圖像背景已經相當優化。

思想是選擇一個瓦片大小（例如：25×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

你甚至可以嘗試使用採用兩個圖像並覆蓋對方的這種做法。

比方說，您需要一個人類的fontawesome圖標作爲圖表，使用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>