助けを求めています: データラベルをその位置と一致してグラフ上に永続的に表示する方法
P粉302160436
2023-08-15 23:21:18
<p>これらのデータ ラベルをグラフ上に永続的に表示して、マウスオーバー時だけでなく常に表示されるようにしたいと考えています。誰か助けてくれませんか？ [これに似た例を示します] コードも書き留めておきます。
(https://i.stack.imgur.com/TY8X1.png)</p>
<pre class="brush:php;toolbar:false;"><!DOCTYPE html> <html lang="ja">
<頭>
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width,Initial-scale=1.0"> <title>円グラフの例</title>
<スクリプト src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<本体>
<div style="位置: 相対;">
<canvas id="pieChart" width="400" height="400"></canvas>
</div>
<スクリプト>
// キャンバス要素を取得します
var Canvas = document.getElementById('pieChart');
//円グラフを作成する
var pieChart = 新しいチャート(キャンバス, {
タイプ: 'パイ'、
データ： {
ラベル: ['オンライン'、'オフライン']、
データセット: [{
データ: [8, 2],
背景色: ['rgba(71, 190, 125, 1)', 'rgba(241, 65, 108, 1)'],
境界線の幅: 0
}]
}、
オプション: {
応答性: true、
mainAspectRatio: false、
プラグイン: {
伝説： {
表示: 偽
}、
データラベル: {
色: '#fff'、
アンカー: 'end', // データラベルの位置 (開始、中心、終了)
align: 'end', // テキストの配置 (開始、中央、終了)
offset: 10, // ラベルとチャートの間のオフセット
フォーマッタ: (値, ctx) => {
let label = ctx.chart.data.labels[ctx.dataIndex];
ラベル ': ' 値 '%' を返します。
}
}
}
}
});
</スクリプト>
</ボディ>
</html></pre>
<p><br /></p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
ラベル用に別のコンテナを追加し、グラフの色に合わせてスタイルを設定しました。フレックスボックスを使用してラベルをグラフの左側に配置しています。 PositionLabelsContainer() 関数は、チャートのサイズに基づいてラベル コンテナーを配置し、ウィンドウのサイズが変更されたときに位置を変更するイベント リスナーを追加します。