web-dev-qa-db-ja.com

ハイチャートjQueryレンダリングの問題-すべてのブラウザ

Highcharts を使用して積み上げ縦棒グラフを作成しようとすると、奇妙な問題が発生します。

グラフがレンダリングされると、列は表示されません。とにかくブラウザのサイズを変更して、グラフを再描画します。 （おもう）！グラフの残りの部分（軸、タイトルなど）は表示されますが、列自体は表示されません。

IE、Firefox、Chromeでも同じ動作がします。

コードをjsfiddleに配置しました--- http://jsfiddle.net/Gd7bB/173/ ロードすると、データが表示されないはずです。ブラウザウィンドウのサイズを変更して「tada」とすると、データが表示されます（むしろ列が表示されます）！

これに関するどんな助けでも大いに感謝されるでしょう。

javascriptjqueryhighcharts
23
Matt

行を削除しますchart.render();

HighChartsコンストラクターが呼び出されるとき、暗黙的にrenderを呼び出す必要はありません。

6
Igor Dymov

私はまったく同じ問題を抱えていました-HighchartsJS v2.1.5（2011-06-22）はjQuery1.7.1では機能しません

JQuery 1.6.1（私が使用した最後の安定版リリース）に変更した後、それは機能しました。誰かがjQueryの他のバージョンをチェックする必要があります。

7
Glycerine

同じ問題が発生しました。ページを読み込んだ後、グラフに線が表示されませんでした（タイトルと凡例のみ）。ブラウザのサイズを変更した後、またはズームした後、チャートが突然表示されました。

問題はjQuery> 1.7（私のバージョンは1.8.2）にありました。Highchartsを最新バージョン（v2.3.3（2012-10-04））に更新すると、問題（およびその他の小さな問題）が修正されました。

6
Asped

スクリプトの最後でdiv-containerをresize()する場合は、HighchartsまたはJqueryのバージョンを変更する必要はありません。

例えば：

$('#div').resize();
3
Ebru

JQuery 1.7.2 + HighCharts 3.0.2を使用すると、次の方法で問題が解決されました。

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        events: {
            load: function(event) {
                //When is chart ready?
                $(window).resize(); 
            }
        }        
    }, ..

これは@revoとほとんど同じですが、「document」の代わりに「window」オブジェクトを使用します。

2
lomantpa

少し遅れるかもしれませんが、jQuery 1.9.1でも同じ問題が発生し、dotnet.highchartsを使用してHighcharts用にダウングレードしたくありませんでした。

そこに新しいハイチャートを作成する場合、たとえば.

.InitChart(new Chart
 {
    DefaultSeriesType = ChartTypes.Line,
    MarginRight = 130,
    MarginBottom = 25,
    ClassName = "chart",
    Events = new ChartEvents { Load = "function(event) { $(document).resize(); }" }
  }) .....

あなたもそれを使うことができます

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        events: {
            load: function(event) {
                //When is chart ready?
                $(document).resize(); 
            }
        }        
    }, ..

。イベントラインはあなたが必要とするものですそしてあなたはあなたのチャートをレンダリングします

私はそれが役に立ったことを願っています、私はそれがどのように機能するかを理解するのに数時間かかりました:)

1
revo

「それほど繊細ではない」解決策 ここ は、私にとって最終的にそれを解決したものです。

setTimeout(function() {
                $(window).resize();
            }, 0);

Python Djangoで、DjangoChartitと呼ばれるラッパーでハイチャートを使用します。

0
PhoenixDev