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

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

ただいまの
回答率

87.34%

WEB画面上にグラフを縦に複数並べたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 839

score 41

ブラウザのサイズに合わせて大きさが変わるグラフ(高さと横幅がある一定以上は小さくならない)を縦に複数並べて表示したいのですが、どのようにすればよいでしょうか。ご教示願います。

行数制限があるため一部削除しました。

追記
ブラウザのサイズをかなり小さくした場合にグラフの大きさが変になるのですが、何が問題でしょうか。ご教示願います。

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 50%"></div>
      <div id="container2" style="height: 50%"></div>
      <div id="container3" style="height: 50%"></div>
      <div id="container4" style="height: 50%"></div>
      <div id="container5" style="height: 50%"></div>
      <div id="container6" style="height: 50%"></div>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {}
    }]
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
var dom2 = document.getElementById("container2");
var myChart2 = echarts.init(dom2);
var app2 = {};
option2 = null;
option2 = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {}
    }]
};
;
if (option2 && typeof option2 === "object") {
    myChart2.setOption(option2, true);
}
var dom3 = document.getElementById("container3");
var myChart3 = echarts.init(dom3);
var app3 = {};
option3 = null;
option3 = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {}
    }]
};
;
if (option3 && typeof option3 === "object") {
    myChart3.setOption(option3, true);
}

var dom4 = document.getElementById("container4");
var myChart4 = echarts.init(dom4);
var app4 = {};
option4 = null;
option4 = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {}
    }]
};
;
if (option4 && typeof option4 === "object") {
    myChart4.setOption(option4, true);
}
var dom5 = document.getElementById("container5");
var myChart5 = echarts.init(dom5);
var app5 = {};
option5 = null;
option5 = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {}
    }]
};
;
if (option5 && typeof option5 === "object") {
    myChart5.setOption(option5, true);
}
var dom6 = document.getElementById("container6");
var myChart6 = echarts.init(dom6);
var app6 = {};
option6 = null;
option6 = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {}
    }]
};
;
if (option6 && typeof option6 === "object") {
    myChart6.setOption(option6, true);
}
window.onresize = function () {
    if(window.innerWidth > 600 && window.innerHeight > 500){
      myChart.resize({
        width: window.innerWidth,
        height: window.innerHeight / 2,
        silent: false
      });
      myChart2.resize({
        width: window.innerWidth,
        height: window.innerHeight / 2,
        silent: false
      });
      myChart3.resize({
        width: window.innerWidth,
        height: window.innerHeight / 2,
        silent: false
      });
      myChart4.resize({
        width: window.innerWidth,
        height: window.innerHeight /2,
        silent: false
      });
      myChart5.resize({
        width: window.innerWidth,
        height: window.innerHeight / 2,
        silent: false
      });
      myChart6.resize({
        width: window.innerWidth,
        height: window.innerHeight /2,
        silent: false
      });
    }else if(window.innerWidth > 600 && window.innerHeight <= 500){
      myChart.resize({
        width: window.innerWidth,
        height: 250,
        silent: false
      });
      myChart2.resize({
        width: window.innerWidth,
        height: 250,
        silent: false
      });
      myChart3.resize({
        width: window.innerWidth,
        height: 250,
        silent: false
      });
      myChart4.resize({
        width: window.innerWidth,
        height: 250,
        silent: false
      });
      myChart5.resize({
        width: window.innerWidth,
        height: 250,
        silent: false
      });
      myChart6.resize({
        width: window.innerWidth,
        height: 250,
        silent: false
      });
    }else if(window.innerWidth <= 600 && window.innerHeight > 500){
      myChart.resize({
        width: 600,
        height: window.innerHeight / 2,
        silent: false
      });
      myChart2.resize({
        width: 600,
        height: window.innerHeight / 2,
        silent: false
      });
      myChart3.resize({
        width: 600,
        height: window.innerHeight / 2,
        silent: false
      });
      myChart4.resize({
        width: 600,
        height: window.innerHeight / 2,
        silent: false
      });
      myChart5.resize({
        width: 600,
        height: window.innerHeight / 2,
        silent: false
      });
      myChart6.resize({
        width: 600,
        height: window.innerHeight / 2,
        silent: false
      });
    }
};
       </script>
   </body>
</html>


正常時

異常時
グラフが重なってしまいます。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+3

同一IDは1画面内に存在できないので別IDでグラフを作り同じクラスを振っておき
resizeはクラス指定で行えば良いと思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/07/25 16:34

    baiduは色々ありましたしね。とりあえず実行してみようと思って質問のコードコピペしましたら中文でアラートが出たのでそのまま閉じてしまいました。

    見た感じだとCSSである程度はなんとかできそうには思いますけど、
    深くまで見てないのでどこまでできるかは不明ですね。

    キャンセル

  • 2019/07/25 17:52

    私はアラートを無視して開いていました笑
    変更したいソースが中国のライブラリを使用しているので、変えられないんですよね。
    とりあえずmin-height追加したら崩れないようになりました。
    ありがとうございます。

    キャンセル

  • 2019/07/25 17:53

    CDNなので一応ダウンロードしてくれば変更は可能ですが、
    なんとなくあまりいじりたくはないですね(中国という理由よりプラグインだから)

    解決につながったようで何よりです

    キャンセル

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

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

関連した質問

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