javascript - HighCharts 全幅の問題

Question

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

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
        }
    }]
});

score 17 · Accepted Answer

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

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

...

コンテナを自動的に満たします。

score 5 · Accepted Answer

これを試して：

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
        }
    }]
});

score 3 · Accepted Answer

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

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'));

score 2 · Accepted Answer

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;
}

score 0 · Accepted Answer

Angularを使用している私にとっては、ngAfterViewInitでオプションを設定することで解決しました!

score 0 · Accepted Answer

私の場合、グラフコンテナーが狭すぎる原因となったのは読み込みの問題でした。jQuery を使用する場合は、次のようにチャートをロードします

$(document).ready(function() {
    let chart = Highcharts.stockChart('chart-container', {
    [...]
    }
}

score 0 · Accepted Answer

私はそれをテストしましたが、非常にうまく機能しています：

chart-tab は div であり、高いチャート div を含むため、最初にを含むための 2 つの DIV を定義する必要がありchart('chart-container')、次に「chart-tab」である「chart-container」のコンテナーを定義する必要がありますadded('resizesensor')。 'chart-tab' DIV on-change のイベントを追加します。関数は次のとおりです。

    new ResizeSensor($('#chart-tab'), function(){
    if(チャート){  
    var wid = document.getElementById('chart-tab').clientWidth;
        var hei = document.getElementById('chart-tab').clientWidth;
        chart.update({
            チャート： {
            幅: 幅,
            身長：へい
            }
        });

    }
    });

javascript - HighCharts 全幅の問題

13 に答える 13

Related

Reference