web-dev-qa-db-ja.com

インジケーターのような円形の進行状況（円グラフ）を作成する方法

パーセンテージが円形グラフの中心になるように、進行状況グラフを次のように正確に表示する必要があります
circular progress indicator

Javascript/jQueryを使用してこれを行うにはどうすればよいですか？ Google Chartを使用して実行できますか？

javascriptasp.nethtmlcsssvg
32
Brij

このためのプラグインがあります： http://anthonyterrien.com/knob/

デモ

jQueryノブ

  • キャンバスベース; pngまたはjpgスプライトはありません。
  • タッチ、マウス、マウスホイール、キーボードイベントが実装されました。
  • 下位互換性;入力要素をオーバーロードします...
54
mnowotka

私は検索して、円形の進行状況インジケーターを作成する少なくとも5つの方法があることを知っています。
次のものが含まれます。

  1. jquery.polartimer.js
  2. jQueryノブ
  3. Jqueryを使用したCSS3円グラフタイマー
  4. jQueryおよびCSS3による循環プログレスバー
  5. ProgressBar.js
4
aisin

JavaScriptグラフ作成のすべてのニーズに Highcharts JS をお勧めします

さらに多くの demos ;を参照します。 ドーナツチャート :)を探していると思います

3
maček

古いブラウザをターゲットにしていない場合は、キャンバス要素に描画することで簡単にできます。これにより、チャートで必要なことを自由に行うことができます。

つまり、このソリューションの唯一の要件はjQueryと、canvas要素をサポートするブラウザです... IE9 +これを示すコードスニペットがあります...

//input
var dimens = 256;
var color = "rgba(54, 162, 235, 0.9)";
var padding = 12;
var width = 10;
var value = 80;
var maxValue = 100;
var countFontRatio = 0.25; //ratio in relation to the dimens value

$(function() {
  $(".chart-total").each(function(idx, element) {

    var _render = function() {

      var startingPoint = -0.5;
      var pointValue = startingPoint;
      var currentPoint = startingPoint;
      var timer;
      var _ctx;

      var $canvas = $(element).find("canvas");
      var canvas = $canvas.get(0);

      pointValue = (value / (maxValue / 20) * 0.1) - 0.5;

      canvas.height = dimens;
      canvas.width = dimens;

      if (!countFontRatio)
        $canvas.parent().find(".legend-val").css("font-size", dimens / value.toString().length);
      else
        $canvas.parent().find(".legend-val").css("font-size", dimens * countFontRatio);

      _ctx = canvas.getContext("2d");



      var _draw = function() {

        _ctx.clearRect(0, 0, dimens, dimens);
        _ctx.beginPath();
        _ctx.arc(dimens / 2, dimens / 2, (dimens / 2) - padding, startingPoint * Math.PI, 1.5 * Math.PI);
        _ctx.strokeStyle = "#ddd";
        _ctx.lineWidth = 2;
        _ctx.lineCap = "square";
        _ctx.stroke();

        _ctx.beginPath();
        _ctx.arc(dimens / 2, dimens / 2, (dimens / 2) - padding, startingPoint * Math.PI, currentPoint * Math.PI);
        _ctx.strokeStyle = color;
        _ctx.lineWidth = width;
        _ctx.lineCap = "round";
        _ctx.stroke();

        currentPoint += 0.1;

        if (currentPoint > pointValue) {
          clearInterval(timer)
        }

      };

      timer = setInterval(_draw, 100);
    };

    _render();

    $(window).resize(function() {
      _render();
    });

  });
})
body {
  font-family: 'Open Sans', sans-serif;
  color: #757575;
}

.chart-total {
  position: relative;
  margin: 0 auto;
}

.chart-total-legend {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translateY(-50%) translateX(-50%);
  -o-transform: translateY(-50%) translateX(-50%);
  -moz-transform: translateY(-50%) translateX(-50%);
  -moz-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
}

.legend-val {
  font-size: 4em;
  display: block;
  text-align: center;
  font-weight: 300;
  font-family: 'Roboto', sans-serif;
}

.legend-desc {
  display: block;
  margin-top: 5px;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:300,400" rel="stylesheet">

<div class="chart-total" style="max-width: 256px;">
  <canvas height="256" width="256"></canvas>
  <div class="chart-total-legend">
    <span class="legend-val" value="3933" style="font-size: 64px;">3,933</span>
    <span class="legend-desc">Total Progress</span></div>
</div>
1
Leo

10の倍数（0％、10％、20％など）を表示する場合は、この目的で CSSスプライト （ google ）を使用できます。スプライトを作成するには、グラフィックの達人である必要があると思います。

スプライトは、複数の画像を含む1つの画像です。目的に合わせて、16x160pxなどの画像を作成できます。この画像が10個の16x16pxの「スライス」に分割され、そのスライスに対応するパーセンテージを描くと想像してください。その後、CSSとJavaScriptを使用して、このスプライトから1つの「フレーム」を表示できます。

1
Salman A

Javascript/jquery/cssだけではできないと思います。各ステップごとに異なる画像をレンダリングし、適切な画像を表示する必要があります。フラッシュ（おそらく既製のコンポーネントがある）、またはsvgまたはhtml5キャンバス要素、または上記のバックエンドのいずれかを使用するapiで作成できます。

0
Christian