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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Google Charts

Google Chartsは、円グラフ・棒グラフ・折れ線グラフなどのさまざまなグラフをJavaScriptで容易に表示できる無料のライブラリ。デザインやイベント処理といったカスタマイズができ、商用利用も可能です。

Q&A

解決済

1回答

2681閲覧

google Chart  棒グラフのx軸のラベルのサイズと位置を変更したい

aushijima

総合スコア55

Google Charts

Google Chartsは、円グラフ・棒グラフ・折れ線グラフなどのさまざまなグラフをJavaScriptで容易に表示できる無料のライブラリ。デザインやイベント処理といったカスタマイズができ、商用利用も可能です。

0グッド

0クリップ

投稿2018/06/13 08:29

編集2018/06/14 04:17

■下記のような状態なのですが、棒グラフのx軸上のbaselineに都道府県名などのラベルが、表示されてしまい、baselineよりも下に表示したいのですが、できません。

■それと、神奈川県のラベルが、県だけ一行に表示しきれず、2行になってしまいます。文字サイズを小さくしたり、ラベルの表示幅を調整できれば収まると思いますが、できていません。※fontSize:1までは、小さくなりましたが、それよりは、小さくなりません。

■一応マニュアルなどを検索見て色々と試してみましたが、できていないのでよろしければ教えてください。ソースは、下記に記載しました。

(function() { 'use strict'; // パッケージのロード google.charts.load('current', {packages: ['corechart']}); // google.charts.load("visualization", "1", {packages: ["piechart"]}); // コールバックの登録 google.charts.setOnLoadCallback(drawChart); // コールバック関数の実装 function drawChart() { // データの準備(円グラフ) var data = new google.visualization.arrayToDataTable([ ['都道府県','人数'], ['北海道',200], ['青森県',320], ['岩手県',320], ['宮城県',320], ['秋田県',320], ['山形県',320], ['福島県',320], ['茨城県',320], ['栃木県',320], ['群馬県',320], ['埼玉県',320], ['千葉県',320], ['東京都',320], ['神奈川県',320], ['新潟県',320], ['富山県',320], ['石川県',320], ['福井県',320], ['山梨県',320], ['長野県',320], ['岐阜県',320], ['静岡県',320], ['愛知県',320], ]); // オプションの準備(棒グラフ) var options = { width: 900, height: 250, minValue:0, hAxis: {fontSize: 1,gridlines:5,minValue:0}, chartArea: {width:'90%',height:'80%'}, legend: 'none', fontSize: 1 }; // 描画用インスタンスの生成および描画メソッドの呼び出し var chart = new google.visualization.ColumnChart(document.getElementById('chart_ken')); chart.draw(data, options); } })();

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

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

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

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

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

guest

回答1

0

自己解決

棒グラフの横軸のデータ数が多くなるとそれに応じて、google chart apiの方では、自動的に幅調整してくれているようなので、maxTextLinesでx軸のラベルを1行で収まり切らない時は、上下交互に表示する方式に変更

// オプションの設定(棒グラフ) var options = { width: 950, height: 350, vAxis:{minValue:0}, hAxis: { maxTextLines:1, maxValue:100 }, chartArea: {width:'90%',height:'75%',top:10}, legend: 'none', };

投稿2018/07/06 02:48

aushijima

総合スコア55

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問