これはchart.jsからのカスタマイズの質問です
バクボグン
chart.jsを使用していますが、cssが適用されていません。chart.jsを使用していますが、場所とサイズを調整してラベルを移動する方法がわかりません。
<div class="penpal-count-box">
<div class="col">
<h5 style="padding-top:2%"><i class="fa fa-globe" style="color:blue">
</i> @lang('home/main.penpal_count')
</h5>
<hr>
<canvas id="myChart"></canvas>
</div>
</div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ['한국', '일본'],
datasets: [{
label: '# of Votes',
data: [{
!!$koreaSenderCount!!
},
{
!!$japanSenderCount!!
}
],
backgroundColor: [
'red',
'blue',
],
}]
},
options: {
maintainAspectRatio: false,
}
});
</script>
<style>
canvas {
width: 400px !important;
height: 170px !important;
margin-bottom: 3%;
}
</style>
側面からラベルを取り除き、上部のdivに合うように設定したいと思います。私の目標は、2番目の図と同様の方法でそれを適用することです。
Surbhi jakasaniya
これを試してください、ここにラベルの位置を追加しました、チャートjs、凡例ラベルドキュメントから
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ['한국', '일본'],
datasets: [{
label: '# of Votes',
data: [{
!!$koreaSenderCount!!
},
{
!!$japanSenderCount!!
}
],
backgroundColor: [
'red',
'blue',
],
}]
},
options: {
maintainAspectRatio: false,
legend: {
position:'right', // from this line you can get your labels in right direction
},
}
});
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
Railsの質問：ユーザーがカスタマイズ可能なUIテキストを作成するための最適な方法は何ですか
- 2
Chart.js折れ線グラフのy軸ラベルをカスタマイズするにはどうすればよいですか？
- 3
Chart.js折れ線グラフのツールチップをカスタマイズするにはどうすればよいですか？
- 4
Chart.jsのカスタマイズ
- 5
このボタンをカスタマイズするにはどうすればよいですか？
- 6
Jiraのカスタマイズに関する問題-ホワイトラベルは可能ですか？
- 7
これはprintfをカスタマイズすることは可能ですか？
- 8
VS CodeでJSのインポートの色をカスタマイズする方法はありますか？
- 9
Djangoでカスタマイズされたユーザーモデル.... user.model（...）はどこから来たのですか？
- 10
Chart.JSのカスタマイズ-デバッグ方法は？
- 11
このようにc3.jsチャートをカスタマイズするにはどうすればよいですか？
- 12
Smart Lock for Passwordsのサインインヒントはどこから来て、どのようにカスタマイズするのですか？
- 13
HighCharts：個々のシリーズの色をカスタマイズすることは可能ですか？
- 14
vue.jsで、サイズ、色、カテゴリで製品をフィルタリングし、ステップワイズスライダーでこれらの各カテゴリを選択するにはどうすればよいですか？
- 15
React Nativeでピッカーの幅をカスタマイズすることは可能ですか？
- 16
InAppBrowserの「完了」ボタンとバーの位置をカスタマイズすることは可能ですか？
- 17
タスクバーアイコンをカスタマイズすることは可能ですか？もしそうなら、どのように？
- 18
タブからスペースへの変換係数をカスタマイズするにはどうすればよいですか？
- 19
Dconfのファイル保存パスをカスタマイズすることは可能ですか？
- 20
別のレイアウトアルゴリズムでカスタマイズされた<ul>を作成することは可能ですか？
- 21
VSCodeでTabCloseButtonアイコンの色をカスタマイズすることは可能ですか？
- 22
Chart.jsで境界線のスタイルをカスタマイズする方法
- 23
VBのデータベースからクイズの質問を読む方法は？
- 24
カスタマイズされた方法で日付のリストを作成する際の問題
- 25
SQLでのカスタマイズされた転置の問題
- 26
RのtableGrobの特定の列をカスタマイズするにはどうすればよいですか？
- 27
これはどのような端末タイプまたはPS1のカスタマイズですか？
- 28
このキャンバスのデザインをカスタマイズするにはどうすればよいですか？
- 29
GNOME Shellの検索エンジンボタンをカスタマイズすることは可能ですか？
コメントを追加