Question

我已经在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-container/

中的缩放方法

我的示例：https://codepen.io/anon/pen/rZjJbq

chart.blade.php

-Djsse.enableSNIExtension=false

app.php.blade。

@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

Answer 1

将此添加到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();
});

Pen edited

用鼠标单击缩放图表作为全屏弹出窗口（高图）？

1 个答案: