36

jQuery Mobile で Highcharts を使用しています。

jQMdata-role="content"コンテナー内に描画されている面グラフがあり、そのコンテナー内に次の div があります。

<div style="padding-top: 5px; padding-bottom: 10px; position: relative; width: 100%;">
    <div id="hg_graph" style="width: 100%"></div>
</div>

width私のハイチャート グラフは、チャートプロパティを設定していない例の 1 つから取られた基本的なグラフです。

最初の読み込みでは、グラフは含まれている div の幅を超えていますが、ブラウザーのサイズを変更すると、適切な幅にスナップされます。

サイズ変更時だけでなく、最初のページの読み込み時に幅が正しくなるようにするにはどうすればよいですか?

スタック オーバーフローに関する同様の投稿を確認しましたが、どの解決策も機能していないようです。

アップデート

  1. 問題は、Highcharts によって動的に生成され<rect>たタグが、ページの読み込み時にブラウザー ウィンドウの全幅を使用しており、コンテナーの div 幅からまったく使用していないことです。検査時に生成されるhtmlは次のとおりです。

    <rect rx="5" ry="5" fill="#FFFFFF" x="0" y="0" **width="1920"** height="200"></rect>

  2. 私は JSFiddle で再現しようとしましたが、そこではうまく動作しているようで、本当に困惑しています。ここに私の JSFiddle コードがあります: http://jsfiddle.net/meandnotyou/rMXnY

4

21 に答える 21

45

電話chart.reflow()して助かりました。ドキュメント: http://api.highcharts.com/highcharts#Chart.reflow

于 2015-11-04T15:44:43.607 に答える
33

これは魔法のように機能します

次のcssファイルに入れます

.highcharts-container {
    width:100% !important;
    height:100% !important;
}
于 2014-07-23T22:07:43.570 に答える
13

私は同じ問題を抱えています。私の場合、ボタンをクリックした後に表示されるハイチャートのグラフがありました。ショーイベントの後に置く$(window).resize();と、問題が正しく解決されました。よろしくお願いします。

于 2015-02-17T17:09:23.827 に答える
4

準備が整ったドキュメント内でハイチャートを定義します。

<div style="width:50%" id="charts">

そしてスクリプト：

$(document).ready(function(){
    $(#chart).highcharts(){
    ...
    });
)};

それがうまくいくことを願っています;）

于 2016-10-10T19:40:07.470 に答える
1

最善の方法は、レンダリング イベント関数のドキュメントで chart.reflow を呼び出すことです。

 Highcharts.stockChart( 'chartContainer', {
 chart: {
  events: {
    render: function() {
      this.reflow();
    }
  },
  zoomType: 'x',
   ...
},

min-width を 0 に設定し、overflow をチャート コンテナーの非表示に設定することを忘れないでください。

#chartContainter {
  min-width: 0;
  overflow: hidden;
  }
于 2018-10-07T00:07:32.750 に答える
1

今日、同じ問題に遭遇しました-モバイルではなく、最初のページの読み込み時にウィンドウのサイズが小さくなりました。ページが読み込まれると、チャートは非表示になり、ページでいくつかの選択を行った後、チャートを作成します。css でコンテナーの最小幅と最大幅を設定しましたが、幅は設定していません。

グラフを作成するときは、SVG を作成するための寸法を決定する必要があります。 グラフが非表示になっているため、寸法を適切に取得できないため、コードはグラフ コンテナーを複製し、画面外に配置して本体に追加し、高さ/幅を決定できるようにします。

幅が設定されていないため、複製された div は、設定した最大幅まで、できるだけ多くのスペースを取ろうとします。SVG 要素はその幅を使用して作成されますが、(画面のサイズに基づいて) 現在より小さいグラフ コンテナー div に追加されます。その結果、グラフはコンテナー div の境界を超えて拡張されます。

グラフが最初にレンダリングされた後、画面上の寸法が認識され、クローン関数は呼び出されません。これは、ウィンドウのサイズを変更したり、チャート データをリロードしたりすると、チャートのサイズが正しくなることを意味します。

cloneRenderToディメンションを取得するために div のクローンを作成する Highcharts 関数をオーバーライドすることで、この初期ロードの問題を回避しました。

(function (H) {
    // encapsulated variables
    var ABSOLUTE = 'absolute';

    /**
    * override cloneRenderTo to get the first chart display to fit in a smaller container based on the viewport size
    */
    H.Chart.prototype.cloneRenderTo = function (revert) {
        var clone = this.renderToClone,
            container = this.container;

        // Destroy the clone and bring the container back to the real renderTo div
        if (revert) {
            if (clone) {
                this.renderTo.appendChild(container);
                H.discardElement(clone);
                delete this.renderToClone;
            }

            // Set up the clone
        } else {
            if (container && container.parentNode === this.renderTo) {
                this.renderTo.removeChild(container); // do not clone this
            }
            this.renderToClone = clone = this.renderTo.cloneNode(0);
            H.css(clone, {
                position: ABSOLUTE,
                top: '-9999px',
                display: 'block' // #833
            });
            if (clone.style.setProperty) { // #2631
                clone.style.setProperty('display', 'block', 'important');
            }
            doc.body.appendChild(clone);

            //SA: constrain cloned element to width of parent element
            if (clone.clientWidth > this.renderTo.parentElement.clientWidth){
                clone.style.width = '' + this.renderTo.parentElement.clientWidth + 'px';
            }

            if (container) {
                clone.appendChild(container);
            }
        }
    }

})(Highcharts);

この関数は、Highchart.js スクリプトが読み込まれた後に読み込まれる別のスクリプト ファイルに保存しました。

于 2017-05-08T15:06:52.903 に答える
0

私もこの問題を抱えており、.highcharts-container css ソリューションが機能していませんでした。私のケースでは、ng-class 条件 (コンテナー div に異なる幅を設定していた) を別々の div に分割することで、なんとか解決しました。

たとえば、これ

<div ng-class="condition?'col-12':'col-6'">
    <chart></chart>
</div>

の中へ

<div ng-show="condition" class="col-12">
    <chart></chart>
</div>
<div ng-show="!condition" class="col-6">
    <chart></chart>
</div>

なぜそれが機能したのか、私は本当にあなたに言うことができませんでした。コンテナの幅を計算するのに ng-class の方が時間がかかるので、highcharts は未定義の幅で最初にレンダリングされると思いますか? とにかくこれが誰かを助けることを願っています。

于 2016-06-07T01:54:14.477 に答える
0

アプリでも同じ問題があり、角度を使用しており、不要なため削除した ngCloak ディレクティブも使用しています

これを行った後、私の問題は解決しました。

于 2016-07-21T05:16:19.823 に答える
-1

width:100%チャートコンテナに追加してください。これにより、関連する問題
が解決されることを願っています。overflow:hidden

classname{min-height:450px;width: 100%;}
于 2018-12-28T09:51:06.650 に答える