我已经在div类col-sm 4上动态创建了图表，它附加在#container div上，现在我正在尝试将highchart缩放为全屏，当我点击它时。就像它在文本下面这个小提琴一样。我做了类似的事，但不知道为什么不工作，有人可以帮我吗？
在我的例子中，当我点击图表时，一切都消失了
我的例子：https://codepen.io/anon/pen/rZjJbq
chart.blade.php
@extends('index.app')
@section('main')
<style type="text/css">
.col-sm-4 {
margin-bottom: 20px;
min-width: 300px;
max-width: 800px;
height: 300px;
margin: 1em auto;
}
.modal{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
}
.modal .col-sm-4 {
height: 90%;
width: 90%;
max-width: none;
}
</style>
<h2 class="text-center" >{{$user->first_name}} Charts </h2>
<div id="main2">
<div id="col-sm-4" id="col-sm-4"></div>
</div>
<script type="text/javascript">
$.getJSON( "http://localhost:8000/api/devices", function( res) {
var result = [];
var namesDev = new Array();
console.log(res);
$.each(res, function(c) {
var deviceNames = res[c].clientAllias;
var clientId = res[c].clientId;
clientNames.push(namesDev);
$.each(res[c].clientData, function(g) {
$.each(data[c].clientData[g], function(key, val) {
clientId2 = data[c].clientData[g].clientId;
var cpu = data[c].clientData[g].cpuUsage;
var time_usages = data[c].clientData[g].timestamp;
final= [];
final.push(time_usages, cpu, clientId2);
result.push(final);
});
});
});
result.sort();
console.log('result', result);console.log('result', result);
var mappedClientsAllias = _.map(_.uniqBy(data, "clientAllias"), "clientAllias");
var mappedClients = _.map(_.uniqBy(data, "clientId"), "clientId");
var clients = [];
_.forEach(mappedClients, function(clientId, clientAllias) {
var tempClient = {
Allias:mappedClientsAllias[clientAllias],
name: clientId,
data: []
};
_.forEach(data, function(tempData) {
if (clientId === tempData.clientId) {
_.forEach(tempData.clientData, function(clientData) {
tempClient.data.push(
[clientData.timestamp, clientData.cpuUsage, clientId]
);
})
}
});
clients.push(tempClient);
});
console.log("clients", clients);
var a =_.forEach(clients, function(client) {
$('<div class="col-sm-4">').css('position','relative')
.appendTo('#container')
.highcharts('StockChart',{
marker: {
states: {
enabled: true
}
},
time: {
timezoneOffset: -2 * 60
},
rangeSelector: {
y: 15,
buttons: [
{
count: 1,
type: "minute",
text: "Sec"
},
],
title: "sat",
inputEnabled: true,
_selected: 1
},
title: {
text: client.Allias
},
xAxis: {
title: {
enabled: true,
text: "Processor unit USAGE"
},
type: "datetime",
dateTimeLabelFormats: {
second: "%H:%M:%S",
minute: "%H:%M",
hour: "%H:%M",
day: "%e. %b"
}
},
plotOptions: {
series: {
marker: {
enabled: false,
}
}
},
series: [
{
name: "Process unit USAGE",
data: client.data.sort()
}
],
chart: {
renderTo: "main"
},
events: {
}
});
})
});
$('#main').bind('mousedown', function () {
$(this).toggleClass('modal');
$('#main', this).highcharts().reflow();
});
</script>
@endsection
app.php.blade。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Master thesis application</title>
<!-- Jquery -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
</script>
<link rel="stylesheet" type="text/css" href="https://getbootstrap.com/docs/3.3/examples/jumbotron-narrow/">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<!-- Import css file-->
<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<!-- Highcharts for normal chart
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
-->
<!-- Highcharts for normal tockSchart -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
</head>
<script type="text/javascript">
</script>
<body>
@include('file.hed')
@include('file.bar')
<div class="container ">
@include('file._info')
@yield('main')
</div> <!-- /container -->
@include('file.down')
</body>
</html>
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
将其添加到CSS：
.col-sm-4.modal {
position: fixed !important;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
display:block;
max-width: none;
padding:1%;
}
JS
$(".col-sm-4").bind("mousedown", function() {
$(this).toggleClass("modal");
$(this).highcharts().reflow();
});