Chart.jsを使用して棒グラフにラベルの正方形を追加する方法
maudulus
Chart.jsで作成したグラフに色分けされたラベルの正方形を追加するにはどうすればよいですか？正方形の名前はわかりませんが、正方形の色に基づいてグラフの各セクションを一意に識別し、その横に名前が表示されます。
添付の写真の右上隅にある「Average_Occupancy」というラベルの付いたボックスを参照して、私が話していることを完全に理解してください。
maudulus
jsfiddle.net/kaatula/j3FJf/1にも同様の答えのフィドルがあります。コードは次のとおりです。
HTML：
<div id="chartContainer" style="width:100%;height: 600px"></div>
JS：
$("#chartContainer").dxChart({
commonSeriesSettings: {
label: {
visible: true
}
},
series: [{
data: [
{arg: 0, val: 1},
{arg: 2, val: 4},
{arg: 4, val: 2}]
}, {
data: [
{arg: 1, val: 1},
{arg: 2.5, val: 9},
{arg: 3.7, val: 5.6}]
}]
});
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
Chart.jsの凡例の長方形を正方形に変更する方法
- 2
ツールチップの正方形にカスタムカラーを設定するChart.js
- 3
円グラフのchart.jsにラベルを追加する方法
- 4
chart.jsの棒グラフでy軸とx軸の線とラベルを非表示にする方法
- 5
chart.jsを使用して棒グラフに背景色を適用する
- 6
Chart.js棒グラフのx軸の中心に棒を配置する方法は？
- 7
私はChart.jsで棒グラフの各列には、JavaScriptを使用して、クリックイベントを追加しようとしています
- 8
Chart.jsを使用して折れ線グラフにクリックイベントを追加する方法
- 9
Chart.js-複数のラベルで棒グラフを描画します
- 10
chart.jsを使用して円グラフでラベルとラベルの値を動的に表示するにはどうすればよいですか？
- 11
角度4を使用してng2Chart（棒グラフ）を動的にレンダリングする方法
- 12
chart.jsを使用して浮動棒グラフを作成する際の問題
- 13
chart.jsを使用した棒グラフの左右のラベル（カテゴリタイプ）？
- 14
Google Chartを使用して縦棒グラフで動的な列の色を作成する方法
- 15
chart.jsを使用して2つのx軸ラベルを作成する方法
- 16
最小、最大、平均でChart.JS棒グラフを作成する方法
- 17
最小、最大、平均でChart.JS棒グラフを作成する方法
- 18
chart.js3の棒グラフと折れ線グラフの上部にデータ値を表示する方法
- 19
Chart.js円グラフにラベルを表示する
- 20
Chart.jsのドーナツグラフにラベルを追加すると、各グラフのすべての値が表示されます
- 21
ツールチップがChart.jsの棒グラフを台無しにする
- 22
バブルグラフ（Chart.js）のポイントにラベルを追加します
- 23
バブルグラフ（Chart.js）のポイントにラベルを追加します
- 24
chart.jsを使用してグラフを動的に追加します
- 25
chart.jsのx軸にラベルとして日付を表示する方法
- 26
chart.jsの初心者：変数を使用してデータでいっぱいの状態を縦棒グラフに表示するのに問題がある
- 27
Chart.js棒グラフをその場所にとどまらせる方法
- 28
Chart.jsを理解し、円グラフに凡例を追加する
- 29
Chart.js - 棒グラフに勾配を追加
コメントを追加