时间戳

首页 > 解决方案 > C3.js 图例在隐藏/显示 div 时重叠。如何防止这种情况？

javascript - C3.js 图例在隐藏/显示 div 时重叠。如何防止这种情况？

问题描述

当我加载一个页面时，会生成一个相当简单的图表：

function showSetters() {

   $("#div1").show();
   chartRef.flush();

}

function showHatchers() {
   $("#div1").show();
   
}

$("#div1").hide();

var chartRef = createChart();

function createChart() {
    var chart = bb.generate({          
        bindto: "#div1",
        data: {
            columns: [
                ['Months', 30, 200, 100, 400, 150, 250],
                ['data2', 50, 20, 10, 40, 15, 25]
            ],
            types: {
                Months: 'bar',
            }
        },
        axis: {
            rotated: true
        }
    });
}

该图表在 Works 中加载得非常好。但是，当我第一次做 $("#div1").hide(); 并且，在创建图表之后，一个 $("#div1").show(); 传说是重叠的。

随着flus（）添加它给出：“无法读取未定义的属性刷新”我错过了什么？

我怎样才能防止这种情况发生？

谢谢，迈克

标签： javascripthtmlc3.js

解决方案

如果 div 被隐藏并且您在其中创建图表，则会错误计算边界。在显示它包含的 div 后尝试在图表上调用 flush()

https://jsfiddle.net/5k0hjnmt/

function createChart() {
    var chart = c3.generate({          
        bindto: "#div1",
        data: {
            columns: [
                ['Months', 30, 200, 100, 400, 150, 250],
                ['data2', 50, 20, 10, 40, 15, 25]
            ],
            types: {
                Months: 'bar',
            }
        },
        axis: {
            rotated: true
        }
    });
    
    return chart;
} 

$("#div1").hide();
  
var chartRef = createChart();

$("#div1").show();

chartRef.flush();   // comment this out for a blank chart

推荐阅读