Javascript 如何在弹出页面上显示Highchart[由按钮触发]_Javascript_Php_Html_Css_Highcharts

Javascript 如何在弹出页面上显示Highchart[由按钮触发]

javascript php html css highcharts

Javascript 如何在弹出页面上显示Highchart[由按钮触发],javascript,php,html,css,highcharts,Javascript,Php,Html,Css,Highcharts,谁能帮助解决这个问题。我有两个file.php（page.php和chart.php）我想让图表显示为弹出页面，但不知何故它不起作用。这是我第一次创建hightchart。 page.php /*模态（背景）*/ .莫代尔{ 显示：无；/*默认情况下隐藏*/ 位置：固定；/*保持原位*/ z指数：1；/*位于顶部*/ 填充顶部：100px；/*框的位置*/ 左：0；排名：0；宽度：100%；/*全宽*/ 高度：100%；/*全高*/ 溢出：自动；/*根据需要启用滚动*/ 背景色：rg

谁能帮助解决这个问题。我有两个file.php（page.php和chart.php）我想让图表显示为弹出页面，但不知何故它不起作用。这是我第一次创建hightchart。 page.php


/*模态（背景）*/
.莫代尔{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
填充顶部：100px；/*框的位置*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景颜色：rgba（0,0,0.4）；/*黑色w/不透明度*/
}
/*模态内容*/
.模态内容{
位置：相对位置；
背景色：#fefe；
保证金：自动；
填充：0；
边框：1px实心#888；
宽度：80%；
盒影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；
-webkit动画名称：animatetop；
-webkit动画持续时间：0.4s；
动画名称：animatetop；
动画持续时间：0.4s
}
/*添加动画*/
@-webkit关键帧动画顶点{
从{top:-300px；不透明度：0}
到{顶部：0；不透明度：1}
}
@关键帧动画顶点{
从{top:-300px；不透明度：0}
到{顶部：0；不透明度：1}
}
/*关闭按钮*/
.结束{
颜色：白色；
浮动：对；
字号：28px；
字体大小：粗体；
}
.关闭：悬停，
.结束：聚焦{
颜色：#000；
文字装饰：无；
光标：指针；
}
.模态标题{
填充：2x16px；
背景色：#5cb85c；
颜色：白色；
}
.模态体{填充：2px 16px；}
.模态页脚{
填充：2x16px；
背景色：#5cb85c；
颜色：白色；
}
带有页眉和页脚的动画模态
开放模态
&时代；
模态头
模态页脚
//获取模态
var modal=document.getElementById（'myModal'）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“myBtn”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}

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>


$（函数（）{
var图；
$（文档）.ready（函数（）{
//绘制图表
美元（“#天”）。高图({
图表：{
plotBackgroundColor:null，
plotBorderWidth:null，
plotShadow:false
},
标题：{
文本：“天频率”
},
工具提示：{
pointFormat:“{series.name}:{point.percentage:.1f}%”
},
打印选项：{
馅饼：{
allowPointSelect:true，
光标：“指针”，
数据标签：{
已启用：false
},
showInLegend：对
}
},
系列：[{
键入“pie”，
名称：'天频率'，
数据：[
[‘星期一’，4]，
[‘星期二’，2]，
[‘星期三’，1]，
[‘星期四’，1]，
['Friday'，2]
]
}]
});
});
});
行为洞察力

如何使图表显示在弹出窗口中。

感谢您将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>


$（函数（）{
$（文档）.ready（函数（）{
//绘制图表
美元（“#天”）。高图({
图表：{
plotBackgroundColor:null，
plotBorderWidth:null，
plotShadow:false
},
标题：{
文本：“天频率”
},
工具提示：{
pointFormat:“{series.name}:{point.percentage:.1f}%”
},
打印选项：{
馅饼：{
allowPointSelect:true，
光标：“指针”，
数据标签：{
已启用：false
},
showInLegend：对
}
},
系列：[
{
键入“pie”，
名称：'天频率'，
数据：[
[‘星期一’，4]，
[‘星期二’，2]，
[‘星期三’，1]，
[‘星期四’，1]，
['Friday'，2]
]
}
]
});
});
});

您可以使用在模态体中具有相同的弹出和显示highcharts贴图功能

示范

您的chart.php可以（在idea中）

Html

与php有什么关系？也许一些php高手可以处理这个问题，比如使用内容或其他（php是服务器端，它不处理弹出窗口，js doesit只是示例原型，如果我有线索，我想在我的设计仪表板中使用，，，谢谢@Fred ii-你能帮我吗。对不起，我不是你的人。我是99%的服务器端。如果你用chart.php的内容替换page.php中的内容（如我的回答所示），它有效吗？我从您的声明中看到了一个想法，但使用不同的方法，我尝试使用iframe而不是c

<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>

<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>

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]
  }]

});