javascript - 用鼠标单击缩放图表作为弹出全屏(highcharts)?
问题描述
我已经在 div 类 col-sm 4 上动态创建图表,它附加在#container div 上,现在我试图在单击它时将 highchart 缩放为全屏。就像它在文本下面的这个小提琴上一样。我做了类似的事情,但不知道为什么不工作,有人可以帮我吗?
在我的示例中,当我单击图表时,一切都消失了
我想有缩放方法,就像这个例子http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/events -容器/
我的例子:https ://codepen.io/anon/pen/rZjJbq
图表.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/lodash@4.17.10/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();
});
推荐阅读
- java - 如何修复由 maven 3.3.9 的构建顺序引起的意外清理阶段并使用 ${revision}
- apache-spark - 如何从 Snowflake SQL 查询创建 PySpark pandas-on-Spark DataFrame?
- python - 理解pytorch预测中的TimeSeriesDataSet
- mysql - MySQL中的hierarchy查询问题,不返回路径
- asp.net - 如何将 MSTest 项目使用的 app.config 设置迁移到 .NET 5
- python - python 包中的命令行脚本:它们是在 Windows 机器上工作还是只在 Linux 上工作?
- google-cloud-platform - 将加密密钥导入谷歌云密钥管理
- python - jax 问题(在 NVDIA DGX 盒子上,不少于)
- haskell - (功能树)元素的总和
- c - 如何修复警告:格式指定类型“char *”但参数的类型为“char”