web-dev-qa-db-ja.com

HighChartsの全幅の問題

レンダリングされたグラフを親divの100％で埋めようとすると、成功しません。左右の隙間を取り除く方法はありますか？

http://jsfiddle.net/sKV9d/

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'chart',
        margin: 0,
        width: 300,
        height: 200,
        defaultSeriesType: 'areaspline'
    },    

    series: [{
        data: [33,4,15,6,7,8, 73,2, 33,4,25],    

        marker: {
            enabled: false
        }
    }]
});
javascriptjqueryhighcharts
12
user2341636

オプションを削除するとwidth: 300, height: 200 このような：

    var chart = new Highcharts.Chart({
chart: {
    renderTo: 'chart',
    margin: 0,
    defaultSeriesType: 'areaspline'
},    

...

コンテナが自動的にいっぱいになります。

13
MISJHA

この問題は、jquery UIが原因です。チャートをレンダリングした後、このコードを呼び出してチャートをリフローします。これで問題が解決しました

chart.reflow();
11
philip mudenyo

私はそれを解決しました

window.dispatchEvent(new Event('resize'));

UPD：

  1. 幅と高さの属性を削除します。
  2. チャートブロックを#containerの100％に調整するには、次のコードを.cssに追加します。

グラフ{幅：100％;高さ：100％; }

2a。別の方法は-「設計」時にコンテナサイズを定義できない場合、チャートのロード後にチャートをリフローできます（つまり、chart.reflow（）;を呼び出します）：

chart: {

    events: {
        load: function(event) {
        **event.target.reflow();**
      }
    }
},

例を参照してください http://jsfiddle.net/yfjLce3o/

6
Andriy B.

minPaddingおよびmaxPaddingを0に設定します。参照： http://jsfiddle.net/sKV9d/3/

6
Paweł Fus

これを試して ：

var height= $("#container").height();
var width= $("#container").width();

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'chart',
        margin: 0,
        width: width,
        height: height,
        defaultSeriesType: 'areaspline'
    },    

    series: [{
        data: [33,4,15,6,7,8, 73,2, 33,4,25],    

        marker: {
            enabled: false
        }
    }]
});
5
Duc Anh

Highchartsの問題はすでに報告されています here 。これを処理するために、上記のようなことができます。私も同じ問題に直面していたので、使用してそれを解決しました

window.dispatchEvent(new Event('resize'));

チャートを次のようにレンダリングした後：

this.chartData={
...     //some required data object to render chart
}

 Highcharts.stockChart('divContainerID', this.chartData, function (chart) {});
 window.dispatchEvent(new Event('resize'));
2
Anup Bangale

チャートにwidthプロパティを提供しない場合、コンテナーの幅を自動的に取得する必要があります。したがって、チャートから幅を削除し、コンテナにwidth: 100%そしてそれは動作するはずです。

特定の幅が必要な場合は、コンテナの幅を特定のサイズに変更するだけです。チャートはまだそのサイズの100％でなければなりません。 JSFiddle

例：

HTML

<div id="container">
    <div id="chart"></div>
</div>

JS

    var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'chart',
        margin: 0,
        height: 200,
        defaultSeriesType: 'areaspline'
    },

    series: [{
        data: [33,4,15,6,7,8, 73,2, 33,4,25],

        marker: {
            enabled: false
        }
    }]
});

CSS

#container {
    width: 100%;
    height: 200px;
}
2
Shahar

cSSを追加するだけです

.highcharts-container{
  width: 100% !important;
}

.highcharts-root{
  width: 100% !important;
}
1
Andreas Septian

updateChart関数を使用し、その関数内でchart.reflow（）を呼び出します

scope.updatechart = function(){
     scope.chart.reflow();
}

更新メカニズムを使用して、30秒ごとにupdatechartメソッドを呼び出します

0
MukulChakane