javascript - Highstock 视觉失真多个图表

Question

我试图在页面的三个选项卡中的每一个上显示不同的图表。 第一个选项卡可以完美呈现，但第二个和第三个选项卡则不然。

Example of first chart ok

Example of second and Third chart not 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
• Bootstrap 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');
});

Answer 1

都是我的错。

我做错了什么:

1. 创建图表
2. 隐藏包含不对应图表的div 选定的图表选项卡
3. 触发窗口大小调整
4. 创建了视觉错误

就我而言，正确的方法是

1. 创建图表
2. 触发窗口大小调整
3. 隐藏包含不对应图表的div 选定的图表选项卡
4. 所有图表中的视觉效果均正确。

改变顺序就成功了。