web-dev-qa-db-ja.com

パーセンテージcharts.jsドーナツの挿入

私はcharts.jslibrarieを使用していますが、ドーナツグラフの穴にマークを追加する方法を知りたいです（パーセンテージのようなもの）-

enter image description here

私のjs

 jQuery(document).ready(function(){

var data = [
            {
                value: 5,
                color:"#A1638C",
                highlight: "#BF7AAF",
                label: "Días Completados 1/21"
            },
            {
                value: 95,
                color: "#07659A",
                highlight: "#4190BA",
                label: "Días pendientes 20/21"
            },

        ]


 var ctx = jQuery("#myChart").get(0).getContext("2d");
 var myDoughnutChart = new Chart(ctx).Doughnut(data);





});

私のキャンバス：

<canvas id="myChart" width="264px"></canvas>
javascriptcanvaschartschart.js
7
Buendiadas

enter image description here

ドーナツグラフはキャンバスの中央に配置されるため、次のようにドーナツの中心を計算できます。

// get the canvas element and its context
var canvas = document.getElementById("myChart");
var ctx = canvas.getContext("2d");

// calculate the center of the canvas (cx,cy)
var cx=canvas.width/2;
var cy=canvas.height/2;

次に、次のように、cx、cyを中心に垂直方向と水平方向にテキストを描画するようにcanvasに指示できます。

// horizontally align text around the specified point (cx)
ctx.textAlign='center';

// vertically align text around the specified point (cy)
ctx.textBaseline='middle';

// draw the text
ctx.font='14px verdana';
ctx.fillStyle='black';
ctx.fillText("Text Here",cx,cy);

ただし、中央に配置されたテキストを描画する前に、アニメーションが完了するのを待つ必要があります。

これを行うには、アニメーションの完了時にコールバック関数をトリガーするようにChartJSに指示する必要があります。チャートオプションのonAnimationCompleteプロパティを設定することで、コールバックを設定できます。

var myDoughnutChart = new Chart(ctx).Doughnut(data, {
    responsive : true,

    // when ChartJS has completed all animations then call the addText function
    onAnimationComplete: addText
});

これがすべてをまとめたデモです：

var doughnutData = [{
    value: 300,
    color: "#F7464A",
    highlight: "#FF5A5E",
    label: "Red"
  }, {
    value: 50,
    color: "#46BFBD",
    highlight: "#5AD3D1",
    label: "Green"
  }, {
    value: 100,
    color: "#FDB45C",
    highlight: "#FFC870",
    label: "Yellow"
  }, {
    value: 40,
    color: "#949FB1",
    highlight: "#A8B3C5",
    label: "Grey"
  }, {
    value: 120,
    color: "#4D5360",
    highlight: "#616774",
    label: "Dark Grey"
  }

];

window.onload = function() {
  var canvas = document.getElementById("chart-area");
  var ctx = document.getElementById("chart-area").getContext("2d");
  window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
    responsive: true,
    onAnimationComplete: addText
  });

};

var myDoughnutChart = new Chart(ctx).Doughnut(data);
var myDoughnutChart = new Chart(ctx).Doughnut(doughnutData, {
  responsive: true,
  onAnimationComplete: addText
});


function addText() {

  var canvas = document.getElementById("chart-area");
  var ctx = document.getElementById("chart-area").getContext("2d");

  var cx = canvas.width / 2;
  var cy = canvas.height / 2;

  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.font = '14px verdana';
  ctx.fillStyle = 'black';
  ctx.fillText("Text Here", cx, cy);

}
body {
  padding: 10px;
  margin: 0;
}
#canvas-holder {
  width: 30%;
}
canvas {
  border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></script>
<div id="canvas-holder">
  <canvas id="chart-area" width="500" height="500" />
</div>
15
markE

Drawメソッドは、チャートのキャンバスを作成します。ホバー時にdrawメソッドが呼び出され、チャートが再作成され、ツールチップが表示されます。 APIの外部でテキストを手動で追加しているため、drawメソッド内にテキストを表示するコードがないため、テキストが表示されなくなります。

これは、チャートを拡張することで実現できます。フォロー Docs こちら。

以下は、ドーナツグラフの中央に合計レコードを追加する例です。

Chart.defaults.derivedDoughnut = Chart.defaults.doughnut;
var customDoughnut = Chart.controllers.doughnut.extend({
  draw: function(ease) {
    Chart.controllers.doughnut.prototype.draw.apply(this, [ease]);
    var width = this.chart.chart.width,
      height = this.chart.chart.height;
    var total = this.getMeta().total;
    var fontSize = (height / 114).toFixed(2);
    var ctx = this.chart.chart.ctx;
    ctx.font = fontSize + "em Verdana";
    ctx.textBaseline = "middle";
    var text = total,
      textX = Math.round((width - ctx.measureText(text).width) / 2),
      textY = height / 2;

    ctx.fillText(text, textX, textY);
  }
});
Chart.controllers.derivedDoughnut = customDoughnut;

例： jsfiddle

1
Debasis Panda

純粋なCSSソリューション

.overview-total {
  position: relative;

  .overview-num{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

HTML

<div class="overview-total">
   <span class="overview-num">140</span>
   <canvas baseChart class="chart-size" width="300" height="180"
                      [plugins]="doughnutChartPluginsSo"
                      [colors]="doughnutChartColorsSo"
                      [data]="doughnutChartDataSo"
                      [labels]="doughnutChartLabelsSo"
                      [chartType]="doughnutChartTypeSo"
                      [options]="doughnutChartOptionsSo"></canvas>
</div>
0
Awais