質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1533閲覧

Chart.js 数字表示のプラグインについて

mimizuk

総合スコア8

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/12/19 08:52

今回、折れ線と積み上げ棒グラフの複合chart.jsを使用して作成しました
最後にグラフグラフ内に数値を入れようとしたところどうにかグラフすべての数値を入れることが出来たのですが、
積み上げ棒グラフにあたる
barA barB barC( yAxisID: 'y-axis-2',で区切っているもの)
のみ数値を表示する表示したいのですがうまくいきませんでした
どなたか方法をご教示方法をご教示いただけますと幸いです。

以下が実際に作成したものになります(barA barB barC lineA lineBの数値が表示されたもの)

<!DOCTYPE html> <html lang=“ja”> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> <title>HTML Sample</title> </head> <body> <canvas id="myChart" width="800" height="200"></canvas>
<script> var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: "bar", data:{ labels:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"], datasets:[ { label:'lineA', type:'line', data:[3,3,3,3,3,3,3,3,3,3,3,3], backgroundColor: "red", borderColor : "rgba(254,97,132,0.8)", fill: false, borderDash: [5, 5],

yAxisID: 'y-axis-1',
},
{
label:'lineB',
type:'line',
data:[0,3,4,4,3,3,3],
backgroundColor: "black",
borderColor : "rgba(0,0,0,255.8)",
fill: false,
yAxisID: 'y-axis-1',

}, { label:'barA', data:[0,3,4,4,4,4,4,4,4,4,], backgroundColor: "#00ff7f", yAxisID: 'y-axis-2', }, { label:'barB', data:[6,3,2,3,0,0,0,0,3,2], backgroundColor: "gray", yAxisID: 'y-axis-2', }, { label:'barC', data:[0,0,0,-1,-1,-1,-1,-1,-1,-1,], backgroundColor: "blue", yAxisID: 'y-axis-2', }, ] }, options:{ title: { //タイトル設定 display: true, //表示設定 fontSize: 18, //フォントサイズ text: '月別の数値', //ラベル// responsive: true,

},
legend: {
display: true,
position: 'top',
label:'test', },

scales:{ xAxes:[{stacked:true,}, ], yAxes:[{id: 'y-axis-1', stacked: false,//積み上げないY軸 type: 'linear', display: true, position: 'left', scaleLabel: { //軸ラベル設定 display: false, //表示設定 labelString: '【口座】', //ラベル fontSize: 12, //フォントサイズ //fontColor:'blue', }, ticks: {beginAtZero: true, max:8, min:-1, stepSize: 1, } },{ id: 'y-axis-2',//積み上げるY軸 stacked: true, type: 'linear', display:true, position: 'right', ticks: { beginAtZero: true, max:8, min:-1, stepSize: 1,},},

] },

},
});

//ラベル // Define a plugin to provide data labels

Chart.plugins.register({
afterDatasetsDraw: function (chart, easing) {
// To only draw at the end of animation, check for easing === 1
var ctx = chart.ctx;

chart.data.datasets.forEach(function (dataset, i) { var meta = chart.getDatasetMeta(i); if (!meta.hidden) { meta.data.forEach(function (element, index) { // ステップ1 数値を文字列に変換 // Draw the text in black, with the specified font ctx.fillStyle = 'rgb(0, 0, 0)'; var fontSize =12; var fontStyle = 'normal'; // 書体 "bold", "italic" var fontFamily = 'seif'; // フォントの種類 "sans-serif", "MS 明朝" ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily); // ステップ3 文字列の位置の基準点 // Just naively convert to string for now var dataString = dataset.data[index].toString(); // Make sure alignment settings are correct ctx.textAlign = 'center'; // 文字列 start, end, left, right, center ctx.textBaseline = 'middle'; // 文字高 middle, top, bottom

// ステップ4 文字列のグラフでの位置
var padding = 5; // 点と文字列の距離
var position = element.tooltipPosition(); //文字列の表示  fillText(文字列, X位置, Y位置)
ctx.fillText(dataString, position.x, position.y - (fontSize / 4) - padding);
});
}
});
}
});
</script>

</body> </html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ラベルは全てのdatasetsに対し付与していくようになっていますので、識別すればいけます。

javascript

1chart.data.datasets.forEach(function (dataset, i) { 2 var meta = chart.getDatasetMeta(i); 3 if (dataset.type.toString() === "bar") { 4 if (!meta.hidden) { 5 (略) 6 } 7 } 8});

上記のようにdatasettypeを識別するif文を追加すればbarだけにラベルが表示されます。
今のソースにはdatasetsの棒グラフにtypeが未指定ですので、明示的に追加してください。

また、labelを判定するようにすれば、特定の棒グラフや折れ線のみに表示することも可能です。

投稿2019/12/20 00:53

編集2019/12/20 05:01
Masakin

総合スコア192

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mimizuk

2019/12/20 08:14

無事にbarのみに数字を表示することが出来ました、ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問