CanvasJs 图表在浏览器调整大小之前不适合其容器

Question

我从昨天开始尝试使用 Canvasjs 创建图表，但是当加载页面时，图表不适合其容器，直到我调整浏览器大小。我认为问题可能是我正在使用的不同 javascript 文件的顺序，但我尝试了不同的方法但没有成功。

这是AppAsset文件：

 public $css = [
    'css/bootstrap.css',
    'css/site.css',
    'highlightJs/styles/magula.css',
    'sweetAlert/sweetalert.css',
    'chart/jquery-ui.min.css',
];

public $js = [
    'highlightJs/highlight.pack.js', 
    'js/main.js',
    'redactorPlugins/imagelink.js',
    'sweetAlert/sweetalert.min.js',
    'chart/jquery.canvasjs.min.js',
    'chart/jquery-ui.min.js',
];

public $depends = [
    'yii\web\YiiAsset',
    'yii\bootstrap\BootstrapAsset',
];

// render all the Javascripts files in the head of the page   
public $jsOptions = [
'position' => \yii\web\View::POS_HEAD
];

这是我渲染图表的方式：

<script type="text/javascript">

$(function () {

//Better to construct options first and then pass it as a parameter
var options1 = {
    title: {
        text: "Your Profile's view of last week"
    },
            animationEnabled: true,
    data: [
    {
    type: "spline",
        dataPoints: [
            { label: "Monday", y: <?php echo $dataStatistics['viewProfileMondayLastWeek']; ?> },
            { label: "Tuesday", y: <?php echo $dataStatistics['viewProfileTuesdayLastWeek']; ?> },
            { label: "Wednesday", y: <?php echo $dataStatistics['viewProfileWednesdayLastWeek']; ?> },
            { label: "Thursday", y: <?php echo $dataStatistics['viewProfileThursdayLastWeek']; ?> },
            { label: "Friday", y: <?php echo $dataStatistics['viewProfileFridayLastWeek']; ?> },
            { label: "Saturday", y: <?php echo $dataStatistics['viewProfileSaturdayLastWeek']; ?> },
            { label: "Sunday", y: <?php echo $dataStatistics['viewProfileSundayLastWeek']; ?> }
        ]
    }
    ],
  axisX: {
    labelFontSize: 16
  },
     axisY: {
    labelFontSize: 16
  }
};

$("#tabs").tabs({
    create: function (event, ui) {
        //Render Charts after tabs have been created.
        $("#chartContainer1").CanvasJSChart(options1);
    },

    //**** I don t understand why this is not called during the page loading *****//
    activate: function (event, ui) {
        //Updates the chart to its container's size if it has changed.
        ui.newPanel.children().first().CanvasJSChart().render();
    }
});

});

</script>



<div id="tabs" style="height: 315px">
<ul>
    <li ><a href="#tabs-1" style="font-size: 12px">Last Week</a></li>
</ul>
<div id="tabs-1" style="height: 240px">
    <div id="chartContainer1" style="height: 240px; width: 100%;"></div>
</div>
</div>

这也是 javascript 文件的调用顺序：

Answer 1

CanvasJS Chart 根据容器的尺寸自动设置图表的高度和宽度。如果没有为容器设置值，则采用默认值。

在引导程序中，由于最初不显示选项卡，图表采用默认值。为了解决这个问题，图表应该在 bootstrap 触发 shown.bs.tab 事件时呈现。

  var chart = new CanvasJS.Chart("chartContainer", {
      title:{
      	text:"Chart 1"
      },  
      data: [
      {
        type: "column",
        dataPoints: [
        { x: 10, y: 71 },
        { x: 20, y: 55},
        { x: 30, y: 50 },
        { x: 40, y: 65 },
        { x: 50, y: 95 },
        { x: 60, y: 68 },
        { x: 70, y: 28 },
        { x: 80, y: 34 },
        { x: 90, y: 14}
        ]
      }
      ]
    });
  chart.render();

  function chartTab2() {
    var chart1 = new CanvasJS.Chart("chartContainer1", {
      title:{
      	text:"Chart 2"
      },
      data: [
      {
        type: "column",
        dataPoints: [
        { x: 10, y: 58 },
        { x: 20, y: 35},
        { x: 30, y: 36 },
        { x: 40, y: 75 },
        { x: 50, y: 45 },
        { x: 60, y: 28 },
        { x: 70, y: 48 },
        { x: 80, y: 14 },
        { x: 90, y: 54}
        ]
      }
      ]
    });
    chart1.render();
  }

$('#bs-tab2').on("shown.bs.tab",function(){
      chartTab2();
      $('#bs-tab2').off(); // to remove the binded event after the initial rendering
  });
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div class="container">
    <div class="col-md-3">
        <ul class="nav nav-pills nav-jt">
            <li class="active"><a data-toggle="tab" href="#tab1">Chart 1</a></li>
            <li><a data-toggle="tab" id= "bs-tab2" href="#tab2">Chart 2</a></li>
        </ul>
        <div class="tab-content">
            <div id="tab1" class="tab-pane fade active in">
                <div id="chartContainer" style="height: 260px; width: 100%;"></div>
            </div>
            <div id="tab2" class="tab-pane">
                <div id="chartContainer1" style=" height: 260px; width: 100%;"></div>
            </div>
        </div>
    </div>
</div>

Answer 2

我遇到了同样的问题，即表格设置为显示：无，导致问题，直到屏幕尺寸发生变化。我使用 jQuery 解决了我的问题。我现在通过单击特定元素（例如与表关联的触发器）来生成 CanvasJS 图表。

基本上像下面这样

  $('whatEverYoutriggerForYourTable').on('click', function() {
     var chart = new CanvasJS.Chart  <-- hit it here
    });

它就像一个魅力 .