2017-02-23 41 views
0

Может ли кто-нибудь помочь решить эту проблему. У меня есть два файла .php (page.php & chart.php) Я хочу, чтобы диаграмма отображалась как всплывающая страница, но почему-то она не работает. Это мой первый раз, когда я создаю hightchart. page.phpКак показать Highchart на всплывающей странице [срабатывает кнопка]

<!DOCTYPE html> 
<html> 
<head> 
<style> 
/* The Modal (background) */ 
.modal { 
    display: none; /* Hidden by default */ 
    position: fixed; /* Stay in place */ 
    z-index: 1; /* Sit on top */ 
    padding-top: 100px; /* Location of the box */ 
    left: 0; 
    top: 0; 
    width: 100%; /* Full width */ 
    height: 100%; /* Full height */ 
    overflow: auto; /* Enable scroll if needed */ 
    background-color: rgb(0,0,0); /* Fallback color */ 
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ 
} 

/* Modal Content */ 
.modal-content { 
    position: relative; 
    background-color: #fefefe; 
    margin: auto; 
    padding: 0; 
    border: 1px solid #888; 
    width: 80%; 
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
    -webkit-animation-name: animatetop; 
    -webkit-animation-duration: 0.4s; 
    animation-name: animatetop; 
    animation-duration: 0.4s 
} 

/* Add Animation */ 
@-webkit-keyframes animatetop { 
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1} 
} 

@keyframes animatetop { 
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1} 
} 

/* The Close Button */ 
.close { 
    color: white; 
    float: right; 
    font-size: 28px; 
    font-weight: bold; 
} 

.close:hover, 
.close:focus { 
    color: #000; 
    text-decoration: none; 
    cursor: pointer; 
} 

.modal-header { 
    padding: 2px 16px; 
    background-color: #5cb85c; 
    color: white; 
} 

.modal-body {padding: 2px 16px;} 

.modal-footer { 
    padding: 2px 16px; 
    background-color: #5cb85c; 
    color: white; 
} 
</style> 
</head> 
<body> 

<h2>Animated Modal with Header and Footer</h2> 

<!-- Trigger/Open The Modal --> 
<button id="myBtn">Open Modal</button> 

<!-- The Modal --> 
<div id="myModal" class="modal"> 

    <!-- Modal content --> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <span class="close">&times;</span> 
     <h2>Modal Header</h2> 
    </div> 
    <div class="modal-body"> 
    <?php include 'chart.php ';?> 
    </div> 
    <div class="modal-footer"> 
     <h3>Modal Footer</h3> 
    </div> 
    </div> 

</div> 

<script> 
// Get the modal 
var modal = document.getElementById('myModal'); 

// Get the button that opens the modal 
var btn = document.getElementById("myBtn"); 

// Get the <span> element that closes the modal 
var span = document.getElementsByClassName("close")[0]; 

// When the user clicks the button, open the modal 
btn.onclick = function() { 
    modal.style.display = "block"; 
} 

// When the user clicks on <span> (x), close the modal 
span.onclick = function() { 
    modal.style.display = "none"; 
} 

// When the user clicks anywhere outside of the modal, close it 
window.onclick = function(event) { 
    if (event.target == modal) { 
     modal.style.display = "none"; 
    } 
} 
</script> 

</body> 
</html> 

chart.php

<DOCTYPE!> 
<html> 

<head> 
    <link rel="stylesheet" type="text/css" href="welcome.css"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script src="http://code.highcharts.com/highcharts.js"></script> 

<script> 
    $(function() { 
    var chart; 

    $(document).ready(function() { 

     // Build the chart 
     $('#days').highcharts({ 
      chart: { 
       plotBackgroundColor: null, 
       plotBorderWidth: null, 
       plotShadow: false 
      }, 
      title: { 
       text: 'Days Frequency' 
      }, 
      tooltip: { 
       pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
      }, 
      plotOptions: { 
       pie: { 
        allowPointSelect: true, 
        cursor: 'pointer', 
        dataLabels: { 
         enabled: false 
        }, 
        showInLegend: true 
       } 
      }, 
      series: [{ 
       type: 'pie', 
       name: 'Days Frequency', 
       data: [ 
        ['Monday', 4], 
        ['Tuesday',  2], 
        ['Wednesday', 1], 
        ['Thursday',  1], 
        ['Friday', 2] 
       ] 
      }] 
     }); 
    }); 

}); 
</script> 
    <title>Behaviour Insight</title> 
</head> 

<body> 
    <div class="container"> 
     <a href="home.html"><div class="header"> 
     </div><!--end header --> 
        <div id="days"></div> 
    </div><!--end container --> 
</body> 

</html> 

, как я могу сделать схему отображаться в всплывающем окне. благодаря

+0

что это отношение к PHP? –

+0

Может быть, какой-то мастер php может справиться с этим, например, с использованием содержимого или т. Д. :( –

+0

php - serveride, он не обрабатывает всплывающие окна, js делает –

ответ

0

изменение chart.php только это ...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
<script> 
    $(function() { 
     $(document).ready(function() { 
      // Build the chart 
      $('#days').highcharts({ 
       chart: { 
        plotBackgroundColor: null, 
        plotBorderWidth: null, 
        plotShadow: false 
       }, 
       title: { 
        text: 'Days Frequency' 
       }, 
       tooltip: { 
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
       }, 
       plotOptions: { 
        pie: { 
         allowPointSelect: true, 
         cursor: 'pointer', 
         dataLabels: { 
          enabled: false 
         }, 
         showInLegend: true 
        } 
       }, 
       series: [ 
        { 
         type: 'pie', 
         name: 'Days Frequency', 
         data: [ 
          ['Monday', 4], 
          ['Tuesday', 2], 
          ['Wednesday', 1], 
          ['Thursday', 1], 
          ['Friday', 2] 
         ] 
        } 
       ] 
      }); 
     }); 
    }); 
</script> 

<div class="container"> 
    <a href="home.html"></a> 
    <div class="header"></div> 
    <div id="days"></div> 
</div> 
+0

это не сработало ... :( –

+0

никаких сообщений об ошибке? –

+0

нет, но диаграмма не отображалась. –

0

Вы можете использовать Bootstrap model иметь такую ​​же функциональность поп и показать Highcharts карты в модальном тела

Fiddle link для демонстрации

Ваш chart.php может быть (по идее)

Html

<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
<div class="container"> 
    <h2>Modal Example</h2> 
    <!-- Trigger the modal with a button --> 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 

    <!-- Modal --> 
    <div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 

      <div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto;"></div> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 

    </div> 
    </div> 

</div> 

JS

Highcharts.chart('container', { 

    title: { 
    text: 'Solar Employment Growth by Sector, 2010-2016' 
    }, 

    subtitle: { 
    text: 'Source: thesolarfoundation.com' 
    }, 

    yAxis: { 
    title: { 
     text: 'Number of Employees' 
    } 
    }, 


    plotOptions: { 
    series: { 
     pointStart: 2010 
    } 
    }, 

    series: [{ 
    name: 'Installation', 
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175] 
    }, { 
    name: 'Manufacturing', 
    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434] 
    }, { 
    name: 'Sales & Distribution', 
    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387] 
    }, { 
    name: 'Project Development', 
    data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227] 
    }, { 
    name: 'Other', 
    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111] 
    }] 

});