Question

您好我正在尝试将C3图表添加到我的Bootstrap模态中，但每当生成图表时，在我调整窗口大小之前它将不会显示在模态中。

之前是否有人遇到此问题，如何解决？在Bootstrap Modal完成向下滑动后加载图表会显示图表...但是如果我可以将图表向下滑动，那将会很好。这是我的代码的一个例子

      var chart = c3.generate(
      {
        bindto: '#modal_graph',
        data: {
          columns: [
            ['data1', 30, 200, 500, 100],
            ['data2', 20, 10, 300, 90]
          ],
        },
      });

      $("#alertModal").modal("toggle");

Answer 1

http://jsfiddle.net/ot19Lyt8/

使用shown.bs.modal事件设置图表

  $('#myModal').on('shown.bs.modal', function (e) {

      var chart = c3.generate({
          data: {
              columns: [
                  ['data1', 100, 200, 150, 300, 200],
                  ['data2', 400, 500, 250, 700, 300], ]
          }
      });

  })

Answer 2

我更正了@ dm4web的响应，它完美地工作： 不要忘记在c3.js之前链接的d3.js !!! JSFIDDLE

$（＆＃39;＃myModal＆＃39;）。on（＆＃39; shown.bs.modal＆＃39;，function（e）{

var chart = c3.generate({
   bindto: "#chart",
   data: {
      columns: [
           ['data1', 100, 200, 150, 300, 200],
           ['data2', 400, 500, 250, 700, 300],
       ]
   }
   });
})

Answer 3

这是一个可能会给你你想要的东西的黑客。在已经显示的模式中创建图表，然后立即应用这些类来隐藏它直到请求它。

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 100, 200, 150, 300, 200],
            ['data2', 400, 500, 250, 700, 300], ]
    }
});
$('#myModal').addClass("modal fade");

http://jsfiddle.net/ot19Lyt8/1/

Answer 4

最好在页面加载一次加载c3或d3图表，然后在模式显示中使用“调整大小”

var chart;
function on_page_load_one_time(){

chart = c3.generate({
bindto: "#chart",
data: {
  columns: [
       ['data1', 100, 200, 150, 300, 200],
       ['data2', 400, 500, 250, 700, 300],
   ]
}
});
}

然后在模态显示

之后

$('#d3modal').on('shown.bs.modal', function (e) {
    chart.resize();
});

C3图表在窗口调整大小之前不显示在Bootstrap模态中

4 个答案: