0

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

第一个图表的示例 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');
});
4

1 回答 1

1

这是我的错。

我做错了什么：

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

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

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

改变顺序就成功了。

于 2015-11-03T21:48:16.923 回答