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

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

ただいまの
回答率

90.50%

  • JavaScript

    16466questions

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

  • jQuery

    6721questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Chart.jsの横軸の項目の角度を変えたい。

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 354

yama-sea

score 1

 前提・実現したいこと

Chart.jsを使用して棒グラフを作成しています。

 発生している問題・エラーメッセージ

X軸の項目の一部が長すぎて、他の項目と一緒に表示されないような状態です。
角度を変えるか、文字の大きさを変えるかなどしてすべての項目を表示させたいのですが…。

 該当のソースコード

<canvas id="graph2018" height="350" width="600"></canvas>

<script>
var ctx = document.getElementById("graph2018");
var myBarChart = new Chart(ctx, {
  //グラフの種類
  type: 'bar',
  //データの設定
  data: {
      //データ項目のラベル
      labels: ["カナダ", "オーストラリア", "アメリカ", "フランス", "ドイツ", "スペイン", "オランダ", "スウェーデン", "イギリス", "イタリア", "スイス", "韓国", "日本" ],
      //データセット
      datasets: [{
          //凡例
          label: "食料自給率(%)",
          //背景色
          backgroundColor: "rgba(75,192,192,0.4)",
          //枠線の色
          borderColor: "rgba(75,192,192,1)",
          //グラフのデータ
          data: [264, 223, 130, 127, 95, 93, 69, 69, 63, 60, 55, 43, 38]
      }]
  },
  //オプションの設定
  options: {
    responsive: true,
        legend: {
          display: false, // 凡例を消す
        },
    title: {
          display: true,
      fontSize: 18,
      text: "各国の食料自給率"
        }
          }
});
</script>

 試したこと

ここに問題に対して試したことを記載してください。

 補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

Cartesian - Chart.js documentation

autoSkipがデフォルトでtrueになっていて、スペースが足りないと自動的に一部のラベルを非表示にするようになっています。これをfalseにすればいいです。

角度もデフォルトでは0度から90度の範囲で自動的に回転するようです。(maxRotation,minRotation)

JSFiddle Demo

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/11 08:35

    変更したところすべての項目が表示されました。ありがとうございました!

    キャンセル

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

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    Chart.jsにおけるX軸の間隔を設定したい

    Webブラウザにてグラフを作成したいと思い、Chart.js(Ver.2)を使っています。 1時間当たりの濃度変化グラフを描いたのですが、次のような表示となり、X軸のラベル間

  • 解決済

    facebook Graph APIで、友達リストの取得

    お世話になります。 こちらのページを参考にswiftでgraph APIを使用して自分のtaggable_friendsを取り出しています。 以下のコードで、問題なく、

  • 解決済

    chart.jsで境界線以降を塗りつぶしたい。

    chart.jsを使ってグラフを表示する機能を実装しています。 chart.jsのドキュメントを一通り見ましたが見つからなかったので質問させていただきます。 下の画像の黄色

  • 解決済

    Chart.js 1.xのグラフを2.xで動作させたい

    前提・実現したいこと 現在Chart.js 2.1.3 で開発しているシステムの改修を行っているのですが 仕様変更でグラフの横幅が広くなったものがあり、スクロールバーでスクロー

  • 解決済

    base64をformとしてPOSTしたい

    画像送信フォームを作っています。 input type="file"でアップした画像をjqueryでクリッピングしています。 (http://flipsblog.jp/archiv

  • 解決済

    canvasで描画したグラフが削除できません

    Angular4を勉強している者です。 TypeScriptにてChart.jsを使ったグラフ描写を実装しています。 <!doctype html> <html lang=

  • 解決済

    Chart.jsでツールチップを外側に表示

    前提・実現したいこと Chart.jsのツールチップ表示位置に関して質問です。 Chart.js2のタイプドーナツで、ツールチップを円の外側に配置させるにはどこを変更すればよいので

  • 解決済

    chart.jsにて、円グラフで動的変更ができません。

    chart.jsとangular.jsを利用して、入力した数値を円グラフでアニメーションを利用し表示したいと思います。 線グラフについては実践されている方がおり、その方からソースを

同じタグがついた質問を見る

  • JavaScript

    16466questions

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

  • jQuery

    6721questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。