Chart.js 2.0でy軸の最大値(scales max)と最小値を設定する – joppot
概要 みなさんこんにちはcandleです。今回はChart.js2.0でy軸の最大値、最小値を設定する方法を紹介します。 Chart.js 2.0では特に指定しないと自動的に、y軸の最大値を設定してくれますが、場合によっては自分で設定したい場合があります。 前提 Chart jsが用意されている 最大値と最小値を設定する 今回はこのline chartで試します。 結論から書くと以下のようなサンプルソースコードになります。y軸を指定しているのはoptionsのところです。 $(document).on('ready', function() { var ctx, data, myChart; ctx = document.getElementById('myChart'); if (ctx !== null) { data = { labels: ['January', 'February
chart.jsのグラフで軸のラベルを飛び飛びに表示する方法 - Qiita
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script> </head> <body> <div style="height: 500px; width: 500px;"> <canvas id="myChart" width="400" height="400"></canvas> </div> <script> var
Chart.js 軸ラベル等の設定＜Chart.js＜Javascript＜木暮仁
スタートページ＞ Javascript＞ Chart.js Chart.js 軸ラベル等の設定（対象：棒グラフ、折れ線グラフ） ラベル、目盛り、目盛り線 概要 ここでは、ＸＹ軸のラベル、目盛り、目盛り線の設定を扱います。右図を作成することを目的とします。 options.scales.xAxes/yAxes で次のような構成で記述します。 options: { : scales: { // 軸設定 xAxes: [ // Ｘ軸設定 { scaleLabel: { // 軸ラベル : }, gridLines: { // 目盛線 : }, ticks: { // 目盛り : }, } ], yAxes: [ // Ｙ軸設定 : xAxesと同様 ] } : 軸ラベル（scaleLabel） 軸ラベルは、標準では表示されません。scaleLabelを記述することにより表示されます。
Chart.jsで作成する折れ線グラフの実例
たまに必要に迫られて、ブラウザで完結するように生のJavaScriptを書くことがあります。 今回はそんなシンプルな構成でも案外きれいなUIを作成するのに役立つグラフ作成ライブラリ、Chart.jsについてメモしておきます。 機能の豊富さとコーディングの簡潔さは往々にしてトレードオフなので、ライブラリの選択が重要ですね。 D3ほど高機能でなくてもいいが、できるだけ簡単にグラフを書きたい、という時に扱いやすい（と個人的に思っている）ライブラリです。 ■ シンプルな記述 ■ よく使われるような種類のグラフなら標準の機能だけでも作成できる ■ (ちょっとサイズが大きいが)ファイルひとつで動く ■ デフォルトでアニメーション(パフォーマンス要件が厳しければ無効化することもできる) もくじ： Chart.jsの設置 基本の折れ線グラフ 線のスタイル 線の色と背景色 破線 直線 ステップ 点 欠損値
ＩＥ8でCharts.jsはうごかない - ウィリアムのいたずらの、まちあるき、たべあるき
ウィリアムのいたずらが、街歩き、食べ物、音楽等の個人的見解を主に書くブログです（たま～にコンピューター関係も） で、IEの互換性（IE７～IE１１）いろいろのつづき。 IE8にして、ちょっとこまったのは、Chart.js。 canvasをつかっているので、IE8はだめ・・・なんだけど、 IE8でCaanvasをつかえるようにするExplorerCanvasをつかっても、えらーがでる（ぐたいてきには、Chart.jsでmeasureText() メソッドがないエラー。IE9ではいったらしい） う～ん、【jQuery】IEでも使えるグラフ描画ツールをみると、jQuery Google Chartsが使えそうなので、jQuery Google Chartsにしますかね・・・ ここ jQuery Google Charts http://keith-wood.name/gChart.html の「
Chart.js | Chart.js
GitHub (opens new window) Chart.jsGetting Started General Configuration Chart Types Axes Developers Migration # Chart.js Welcome to Chart.js! Get started with Chart.js — best if you're new to Chart.js Migrate from Chart.js v3 or Chart.js v2 Join the community on Discord (opens new window) and Twitter (opens new window) Post a question tagged with chart.js on Stack Overflow (opens new window) Contr
Chart.jsを使って「動的に」グラフをアニメーションさせる方法 - ウィリアムのいたずらの、まちあるき、たべあるき
ウィリアムのいたずらが、街歩き、食べ物、音楽等の個人的見解を主に書くブログです（たま～にコンピューター関係も） Javascriptでグラフを書く場合、Chart.jsを使うことが多いと思う。 ただ、Chart.jsは、 Canvasで超可愛いグラフが作れる!「Chart.js」の紹介 http://liginc.co.jp/web/js/40934 にあるように、多くのサンプルは、グラフを１回書くだけで、 Ajaxとか使って、動的にグラフを描いていく（アニメーションさせる） 方法を書いてないよね。 例えばこんな感じ http://www.geocities.jp/xmldtp/js_chart1.htm （ちょっと経つと、点が追加されていく。 下のボタンをクリックすると、少し経ってから とまる（すぐにはとまらない）。 とまっているときにクリックすると、動き出す）。 なので、今日は、そこを
絶対まねしたい！Chart.jsを使ってフラットデザインぽいグラフを作る方法 | startapp
Chart.jsというのが流行っているみたいなので、もうちょっとフラット感がでないものか、カスタマイズに挑戦してみました。Chart.jsの使い方などは、LIGさんの記事を参考にしてください。 ドーナッツ これを何個か並べればかなりフラット感が出ますね。外側の青い部分のみをChart.jsで描画し、それ以外はCSSで調整しています。2つ目のセグメントを背景色で塗れば、円弧のように見えます。 ※ ドーナッツの幅は、percentageInnerCutout で調整できます。 ラインチャート お次は棒グラフです。フラットに見せるポイントは、グラフや線などを簡略化することでイラストのように見せるところです。また、数字と組みあわせるとかっこ良く見えます。※ 数字の部分は、CSSで組んでいます。 ※ 横軸のラベルは、意図的に減らしています。 バーチャート 棒グラフもフラットにしてみました。こちらも数
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chart.js