Highstock视觉失真多重图表

我试图在页面的三个选项卡上分别显示不同的图表。第一个选项卡完美呈现，但第二个和第三个不会。Highstock视觉失真多重图表

Example of second and Third chart not OK

的标签选择了一个$(window).trigger('resize');每次执行这样的图表调整大小。到目前为止，他们这样做，但视觉问题仍然存在。

当我首次创建图表创建他们individualy：

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

来源

2015-11-03 Gerardo Buenrostro González

看到这个http://stackoverflow.com/questions/5688069/jquery-ui-tabs-and-highcharts-display-rendering-issue –

@Nishith，我试过这种方法，但它没有奏效，没有使用jQuery UI。 –

它与隐藏的DIV与你的图表有关。看到这个：http://stackoverflow.com/questions/17206631/why-are-bootstrap-tabs-displaying-tab-pane-divs-with-incorrect-widths-when-using – wergeld

这是我不好。

我做错了：

创建图表
隐藏包含该不对应于选择图表选项卡
图表的div触发窗口调整创造
视觉误差

在我的情况下，正确的方法是

创建图表
触发窗口调整大小
隐藏包含该不对应于所选图表标签
纠正所有图表视觉图表的div。

改变顺序制造了这个伎俩。

来源

2015-11-03 21:48:16

Highstock视觉失真多重图表

回答

相关问题