web-dev-qa-db-ja.com

ChartJS –円グラフの周りの空白を削除する方法はありますか？

Pie chart

左右に不要な間隔があるチャートを扱っています。運が悪かったので取り除こうとしていたのですが、他に何をしたらいいのかわかりません。ドキュメントをよく読みましたが、解決策が見つからないようです。これは可能ですか？さらに情報が必要な場合はお知らせください。提供します。

編集：

<div>
<canvas id="chart-gender"></canvas>  
</div>


<script>
var gender_data = [10, 35];

var graph_gender_preset = {
    labels: ["Female", "Male"],
    datasets: [
        {
            data: gender_data,
            backgroundColor: ["#0fa0e3", "#ff3549"]
        }
    ]
};

var ctx3 = $("#chart-gender");

var chart_gender = new Chart(ctx3, {
type: 'doughnut',
data: graph_gender_preset,
options: {
        responsive: true,
        title: {
            display: false,
            position: "top",
            fontStyle: "bold",
            fontSize: 0,
            fullWidth: false,
            padding: 0
        },
        legend: {
            display: false,
            position: "top",
            fullWidth: false,
            labels: { display: false, usePointStyle: true, fontSize: 15, fontStyle: "bold" }

        }
    }
});
</script>
javascriptmarginchart.jsspace
13
Pelle

問題はドーナツではなく、それが使用されているキャンバスです。

ドーナツは2次ボックスを使用する必要があります。そうしないと、楕円のように見えます。したがって、キャンバスのサイズを変更して2次にすると、境界線がなくなります。

これが JS Fiddle example です。

<table border="1">
  <tr>
    <td>
      First
    </td>
    <td>
      <canvas width="100%" height="100%" id="myChart"></canvas>
    </td>
    <td>
      Third
    </td>
  </tr>
</table>
12
Oliver

たくさんの調査の結果、幅と高さを設定するとそのスペースがなくなることがわかりました。

<div>
<canvas id="chart-gender" width="300" height="300"></canvas>  
</div>
1
Vinay Murakonda

レスポンシブをfalseに設定する必要があると思います。そうすると、heightプロパティとwidthプロパティは次のように機能します。

const options= {
 responsive: false
} 
<div>
  <canvas id="chart-gender" width="300" options={options} height="300"></canvas>  
</div>
0
Patrick Ward

私は最近同じ問題を抱えています。私の解決策は、チャートのアスペクト比を次のように変更することでした。

options: { aspectRatio: 1 }

ドキュメントによると ここ デフォルトは2に設定されています。1に変更すると、チャートキャンバスは正方形になり、ドーナツ/パイの周りに空白がなくなります。

これが誰かを助けることを願っています！

0
user2993689