Highstock 视觉失真多图

Question

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

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

根本没有jQueryUI

更新 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

是我的错。

我做错了什么：

创建图表
隐藏包含不对应图表的div 选定的图表选项卡
触发window调整大小
创建视觉错误

在我的案例中正确的方法是

创建图表
触发window调整大小
隐藏包含不对应图表的div 选定的图表选项卡
所有图表中的正确视觉效果。

改变顺序就成功了。

Highstock 视觉失真多图

Highstock visual distortion multiple Charts

javascript

charts

highcharts

highstock

visual-glitch