chart.js(14)

14follower
harada さんのアバター 66views

ChartJS:横幅だけをレスポンシブにして縦幅は指定したサイズで表示する

横幅と縦幅どちらもレスポンシブにしてしまうと、思いがけず大きくなりすぎるということがあります。 以下のように縦サイズとオプションを設定することで横幅だけをレスポンシブ表示にして縦幅は指定したサイズで表示し続けることができます。 ... 2017年11月2日
nissy さんのアバター 36views

Slack API × D3

MeteorにD3を導入 発端 サークルで、Slackを使っているので、そのトークを分析したいと思い、D3 × Slackを試してみることに 導入 今回は、nvd3を使用した。実は、最初はD3で一から組んでいたが、学習コストが高く諦... 2017年10月29日
harada さんのアバター 128views

ChartJS:目盛りとグラフの間にpaddingを設定する

以下のオプションを設定することで、目盛りとグラフの間にpaddingを設定できます。 var options = { scales: { yAxes: [{//Y軸に設定したい場合 ticks: { ... 2017年6月15日
harada さんのアバター 456views

ChartJS:Y軸の目盛りに小数点を出さないようにする

こちらもオプション設定で解決するようです。 var options = { scales: { yAxes: [{ ticks: { beginAtZero: true, ... 2017年6月15日
harada さんのアバター 1,168views

ChartJS:x軸の目盛りの最大表示数と表示角度を設定する

ChartJSでグラフを作成して、X軸の値の数が多い場合、自動で斜めに表示されます。 これをまっすぐのまま表示したい場合オプション設定で以下のように指定します。 var myChart = new Chart(ctx, { typ... 2017年6月14日
harada さんのアバター 768views

chart.js:縦のラインを全部非表示にする

Chart.jsに以下のオプションを設定することで、縦のメモリ、始まりの縦線を含めてすべて非表示にできます。 options: { scales: { xAxes: [{ display: ... 2017年6月13日
harada さんのアバター 482views

chart.jsで各項目の太さを変えたグラフを表示する

項目数だけグラフを重ねることで実現できるようです。 HTML <div class="donutsChartCustom"> <canvas id="dnChart1" class="circle01" w... 2017年4月4日
harada さんのアバター 231views

Chart.jsでツールチップを削除する

オプションで以下のように「tooltips」の「mode」を「false」にすることで、グラフに表示されるツールチップを削除できます。 var chart1 = new Chart(canvas, { type: "line", ... 2016年10月21日
harada さんのアバター 1,287views

Chart.jsでツールチップを削除する

オプションで以下のように「tooltips」の「enabled」を「false」にすることで、グラフに表示されるツールチップを無効にできます。 var chart1 = new Chart(canvas, { type: "lin... 2016年8月15日
harada さんのアバター 3,756views

Chart.jsで凡例を削除する

オプションで以下のように「legend」の「display」を「false」にすることで、グラフに表示される凡例を削除できます。 var chart1 = new Chart(canvas, { type: "line", ... 2016年8月3日
harada さんのアバター 1,761views

Chart.jsのツールチップを一つにまとめるオプション

グラフに複数のデータを設定していて、その値が違いすぎる場合、ツールチップがそれぞれバラバラに表示されます。 オプションに以下の記述をすることで、バラバラに表示されていたツールチップが一つにまとめることができます。 オプション記述例 デー... 2016年6月13日
harada さんのアバター 2,216views

Chart.jsに凡例を追加する

2016/06/13 追記 ※ こちらは古いバージョン(1.x.x)のChart.js用の記述のようです。新しいバージョンではこちらの記述では動かないおそれがあります。 Chart.jsを利用することで、webサイトに簡単にグラフを表... 2016年6月10日
nissy さんのアバター 1,552views

Chart.jsでかわいいグラフを作る

TOWNの開発で、Chart.jsというグラフを描くツールを使っていたので調べてみました。するとなんと、かわいいグラフが描ける!!ということなので、まとめてみましたー!!実際にグラフが表示される時の動きが、かわいい気がします(どーでもいいで... 2016年6月10日
harada さんのアバター 595views

BootstrapのモーダルウィンドウでChart.jsを利用する場合

モーダルウィンドウを開いた時にChart.jsのグラフを表示したい場合、通常の記述のままだとモーダルウィンドウを開いた時にChart.jsが表示されない(実行されない)ことがあります。 その場合はChart.jsのJavaScriptの実行... 2015年9月30日