javascript — диаграмма CanvasJs не помещается в свой контейнер, пока размер браузера не изменится

Со вчерашнего дня я пытаюсь создать график, используя 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

Решение

CanvasJS Chart автоматически устанавливает высоту и ширину диаграммы в соответствии с размерами контейнера. Если значения не установлены для контейнера, он принимает значения по умолчанию.

В начальной загрузке, поскольку вкладка изначально не отображается, диаграмма принимает значения по умолчанию. Чтобы решить эту проблему, диаграмма должна отображаться, когда с помощью начальной загрузки запускается событие visible.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>
2

Другие решения

Других решений пока нет …

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector