カスタム形状のグラフを作成する必要があります。たとえば、人口を表すには、統計とデータを表示する人間の形を作成する必要があります。これを行うのに役立つJavaScriptライブラリはありますか? D3 js は役に立ちますか?
どんな助けでも大歓迎です。
ありがとうございました。
質問する
1388 次
4 に答える
1
2 つの画像を使用して互いに重ねるというこのアプローチを試すこともできます。
グラフとして人間のフォントの素晴らしいアイコンが必要だとしましょう。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>
于 2016-07-02T17:48:24.653 に答える
0
そのようなものをコーディングするために使用できる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/
于 2012-06-19T17:09:47.787 に答える
0
または、これを行う簡単な方法は、繰り返しの背景画像を設定し、カウントに基づいて DIV の幅/高さを変更することです。利点は、DIV の高さと繰り返しの画像の背景がかなり最適化されているため、どのブラウザーでも実質的にパフォーマンスの低下がないことです。
アイデアは、タイル サイズ (例: 25 x 11) を選択し、それを 2 つの DIV に分割することです。上の画像では、最初の DIV は分割されていない (最大幅) ため、視覚的に 2 つの行に対応しています。2 番目の 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 計算機を参照してください。 .html
于 2012-06-19T17:55:04.043 に答える
0
「人間の形」については知りませんし、そうするツールはないと思います。
ただし、私が遭遇した最高かつ最も近いリソースはHighcharts です。これには、あらゆる種類の円グラフ、スプライン、バーなどがあり、データをインタラクティブにプロットする必要があります。
また、 Google Chartsもご覧になることをお勧めします。Highcharts が提供しないものの 1 つは、地図ベースのデータ プロットです。Google にはGeoMapと呼ばれるものがあり、世界中の小さな町のような特定の場所に関する情報をプロットするデータを提供しています。
于 2012-06-19T01:17:33.700 に答える