javascript - Highstock 視覚的歪み複数チャート

Question

ページの 3 つのタブのそれぞれに異なるグラフを表示しようとしています。最初のタブは完全にレンダリングされますが、2 番目と 3 番目のタブはレンダリングされません。

最初のグラフの例

2 番目と 3 番目のチャートが OK でない例

タブが選択されるたびに$(window).trigger('resize');が実行されるため、チャートのサイズが変更されます。これまでのところそうですが、視覚的な不具合は続いています。

初めてチャートを作成するときは、個別に作成します。

var graficoOpcCuenta = { chart: { renderTo: 'graficoPorCuenta' }, rangeSelector: { selected: 1 }, title: { text: 'Rentabilidad Cuenta' }, series: [{ data: [], tooltip: { valueDecimals: 2 } }] };
var graficoOpcCliente = { chart: { renderTo: 'graficoPorCliente' }, rangeSelector: { selected: 1 }, title: { text: 'Rentabilidad Cliente' }, series: [{ data: [], tooltip: { valueDecimals: 2 } }] };
var graficoOpcGrupo = { chart: { renderTo: 'graficoPorGrupo' }, rangeSelector: { selected: 1 }, title: { text: 'Rentabilidad Grupo' }, series: [{ data: [], tooltip: { valueDecimals: 2 } }] };

var graficoPorCuenta = new Highcharts.StockChart(graficoOpcCuenta);
var graficoPorCliente = new Highcharts.StockChart(graficoOpcCliente);
var graficoPorGrupo = new Highcharts.StockChart(graficoOpcGrupo);

何か案は？

現在、Highstock JS v2.1.9 を使用しています。

更新：

幅を設定するchart:{..., width: x}だけではうまくいきません。

私は使用しています：

• jQuery v2.1.4
• ブートストラップ 3.3.5

jQuery UIがまったくない

更新 2

ここに私のサイズ変更があります：

function resize() {
    var height = "some value";

    $("#graficoPorCuenta").setGridWidth($("#grillaPorCuenta").width());
    $("#graficoPorCliente").setGridWidth($("#grillaPorCliente").width());
    $("#graficoPorGrupo").setGridWidth($("#grillaPorGrupo").width());

    if ($('#graficoPorCuenta').highcharts() != undefined) {
        $('#graficoPorCuenta').highcharts().setSize($("#grillaPorCuenta").width(), height + 120, doAnimation = false);
        graficoPorCuenta.reflow();
    }
    if ($('#graficoPorCliente').highcharts() != undefined) {
        $('#graficoPorCliente').highcharts().setSize($("#grillaPorCliente").width(), height + 120, doAnimation = false);
    graficoPorCliente.reflow();
    }
    if ($('#graficoPorGrupo').highcharts() != undefined) {
        $('#graficoPorGrupo').highcharts().setSize($("#grillaPorGrupo").width(), height + 120, doAnimation = false);
        graficoPorGrupo.reflow();
    }
}

また：

$(window).bind('resize', function () {
      resize();
}).trigger('resize');

タブの変更時:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    target = $(e.target).attr("href") // activated tab
    if (target == "#tabCuenta") {
        graficoPorCuenta.reflow()
    }
    if (target == "#tabCliente") {
        graficoPorCliente.reflow()
    }
    if (target == "#tabGrupo") {
        graficoPorGrupo.reflow()
    }
    $(window).trigger('resize');
});