我从昨天开始尝试使用 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文件的顺序:
答案 0 :(得分:2)
CanvasJS Chart根据容器的尺寸自动设置图表的高度和宽度。如果没有为容器设置值,则采用默认值。
在bootstrap中,由于最初未显示选项卡,因此图表采用默认值。要解决此问题,应在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
});
&#13;
<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>
&#13;