Jquery 通过单击图形在同一页面的模式中显示highchart图形

我已经在我的统计页面上显示了一些图表。我想在同一页的模式窗口中显示图形，但它不在模式窗口中显示。我在模式和页面图表上调用了相同的id。我认为这是某种身份冲突。我还尝试按类初始化图形，但没有成功。这是我的密码

<?php //echo "<pre>"; print_r($body_stat); exit(); ?>

 <?php //for($i=0;$i<count($body_stat);$i++)
//      { 
//          echo $body_stat[$i]->stats_field;

//      }
//      die(ss);
    ?> 
<?php $this->load->view('/frontend/meta-header'); ?>
<?php $this->load->view('/frontend/header'); ?>

 <!-- Container start -->
<div class="container innerpage-container">
    <div class="row">
        <div class="col-lg-12 col-sm-12 profile-status">
            <div id="horizontalTab">
                <ul class="resp-tabs-list hor_1">
                    <li class="my-status"><span></span>My Stats</li>
                        <li class="exercise"><span></span>Exercise</li>
                        <li class="nutrition"><span></span>Nutrition</li>
                        <li class="my-profile"><span></span>My Profile</li>
                        <li class="friends"><span></span>Friends</li>
                        <a href="<?php echo site_url(); ?>/frontend/fitness/logout"><button class="logout-btn"><span></span>Logout</button></a>
                        <button class="share-btn" style="float:right;"><span></span>Share</button>
                        <button class="update-status" style="float:right;"><span></span>Update</button>
                </ul>
                <div class="resp-tabs-container hor_1">

                    <div>
                        <a class="update-stats" href="<?php echo site_url(); ?>/frontend/stats/addBodyStats"><button type="button" class="btn btn-primary btn-md">Update My Body Stats</button></a>

                        <form class="stats-form" action="<?php echo site_url();?>/frontend/fitness/userProfile" method="post" enctype="multipart/form-data">
                        <input type="text" id="from"  name="from" value="<?php echo set_value('from'); ?>"placeholder="From"> To <input type="text" id="to"  name="to" value="<?php echo set_value('to'); ?>"placeholder="To">
                        <button type="submit" class="btn btn-primary btn-sm stats-submit">Filter</button>
                    </form>

                            <p>


<!-- graph modal html -->
<a href="#" data-toggle="modal" data-target="#chart-modal" class="chart-modal"><i class="fa fa-bar-chart-o modal-icon"></i></a>
<div class="modal fade" id="chart-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content chart">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Assortment Analysis</h4>
      </div>
      <div class="modal-body">
        <div class="panel panel-default">
          <div class="panel-body">
            <div id="chart-graph-1"></div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!-- end graph modal html -->

                    <?php 
                    if($body_stat[0]=='n')
                    {
                        echo 'Record not found';
                    }else
                    {
                    for($i=0;$i<count($body_stat);$i++)
                    { ?>
                     <div class="chart<?php echo $i; ?>"></div>


<script>
                                $(function () { 
                                    $('#chart<?php echo $i ?>').highcharts({
                                        chart: {
                                            type: 'spline'
                                        },
                                        title: {
                                            text: '<?php echo $body_stat[$i]->stats_field; ?>'
                                        },
                                        xAxis: {
                                            type: 'datetime'
                                        },
                                        plotOptions: {
                                            series: {
                                                pointStart: Date.UTC(2015, 0, 1),
                                                pointInterval: 24 * 3600 * 1000
                                            }
                                        },
                                        credits: {
                                            enabled: false
                                        },
                                        series: [{
                                            name: '<?php echo $this->session->userdata('user_name'); ?>',
                                            data: [<?php $this->stats_model->getBodyStatsValues($body_stat[$i]->stats_field); ?>]
                                        }],

                                    tooltip: {
                                        shared: true,
                                        crosshairs: true
                                       }
                                    });
                                });  

                            </script>
                        <?php } 
                        } ?>
                            <!-- graph modal js -->
                            <div class="clearfix"></div>

                            <script src="<?php echo base_url(); ?>/frontend/js/highcharts.js"></script>
                            <script src="<?php echo base_url(); ?>/frontend/js/exporting.js"></script>
                        </p>
                    </div>

                    <div>
                        <p>
                        <div id="ChildVerticalTab_1">
                            <ul class="resp-tabs-list ver_1">
                                <li>Workout list</li>
                                <li>Custom workouts</li>
                                <li>Workout Log</li>
                            </ul>
                            <div class="resp-tabs-container ver_1">
                                <div>
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravida mollis.
                                    </p>
                                </div>
                                <div>
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravida mollis.
                                </div>
                                <div>
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravida mollis.
                                    </p>
                                </div>
                            </div>

                        </div>
                    </p>
                    </div>

                    <div>
                        <p>nutrition</p>
                    </div>
                    <div>
                        <p>my profile</p>
                    </div>
                    <div>
                        <p>friends</p>
                    </div>

                </div>
            </div>



        </div>
    </div>




    <script>
                $(document).ready(function () {
                    $('#horizontalTab').easyResponsiveTabs({
                        type: 'default', //Types: default, vertical, accordion
            width: 'auto', //auto or any width like 600px
            fit: true, // 100% fit in a container
            tabidentify: 'hor_1', // The tab groups identifier
            activate: function(event) { // Callback function if tab is switched
                var $tab = $(this);
                var $info = $('#nested-tabInfo');
                var $name = $('span', $info);
                $name.text($tab.text());
                $info.show();
                        }
                    }); 

                    $('#ChildVerticalTab_1').easyResponsiveTabs({
                        type: 'vertical',
                        width: 'auto',
                        fit: true,
                        tabidentify: 'ver_1', // The tab groups identifier
                        activetab_bg: '#fff', // background color for active tabs in this group
                        inactive_bg: '#F5F5F5', // background color for inactive tabs in this group
                        active_border_color: '#c1c1c1', // border color for active tabs heads in this group
                        active_content_border_color: '#5AB1D0' // border color for active tabs contect in this group so that it matches the tab head border
                    });
                });
            </script>
</div> 

 <!--container end-->

<?php $this->load->view('/frontend/footer'); ?>

我的统计数据
锻炼
营养学
我的个人资料
朋友
分享
更新

尝试使用jquery打开模式：

<script>

createGraph({
                                    chart: {
                                        renderTo: 'chart<?php echo $i; ?>',
                                        type: 'spline',
                                        events: {}
                                    },
                                    title: {
                                        text: '<?php echo $body_stat[$i]->stats_field; ?>'
                                    },
                                    subtitle: {
                                        text: 'Click on chart to Enlarge',
                                    },
                                    xAxis: {
                                        type: 'datetime'
                                    },
                                    plotOptions: {
                                        series: {
                                            pointStart: Date.UTC(2015, 0, 1),
                                            pointInterval: 24 * 3600 * 1000
                                        }
                                    },
                                    credits: {
                                        enabled: false
                                    },
                                    series: [{
                                        name: '<?php echo $this->session->userdata('user_name'); ?>',
                                        data: [<?php $this->stats_model->getBodyStatsValues($body_stat[$i]->stats_field); ?>]
                                    }],

                                tooltip: {
                                    shared: true,
                                    crosshairs: true
                                   }
                                });  
                                function createGraph(chartOptions) {
                                    // open the basic chart
                                    $(document).ready(function () {
                                        // set the click event for the parent chart
                                        chartOptions.chart.events.click = function () {
                                            hs.htmlExpand(document.getElementById(chartOptions.chart.renderTo), {
                                                width: 1000,
                                                height: 470,
                                                allowWidthReduction: true,
                                                allowHeightReduction: true,
                                                preserveContent: false,
                                                align: 'center',
                                                allowSizeReduction: true,
                                                dimmingOpacity: '0.75'
                                            }, {
                                                chartOptions: chartOptions
                                            });
                                        };
                                        var chart = new Highcharts.Chart(chartOptions);
                                    });
                                }
hs.Expander.prototype.onAfterExpand = function () {
    if (this.custom.chartOptions) {
        var chartOptions = this.custom.chartOptions;
        if (!this.hasChart) {
            chartOptions.chart.renderTo = $('.highslide-body')[0];
            chartOptions.chart.events.click = function () {};
            var hsChart = new Highcharts.Chart(chartOptions);
        }
        this.hasChart = true;
    }
};

</script>


    http://jsfiddle.net/roadrash/GqhEX/

我使用highslide完成了这项工作，并在头部调用了highchart和highslide脚本。现在点击图表打开模式窗口。
这是小提琴


createGraph({
图表：{
renderTo:'图表'，
类型：“样条线”，
事件：{}
},
标题：{
文本：“”
},
副标题:{
文字：“点击图表放大”，
},
xAxis：{
键入：“日期时间”
},
打印选项：{
系列：{
pointStart:Date.UTC（2015,0,1），
点间距：24*3600*1000
}
},
学分：{
已启用：false
},
系列：[{
名称：“”，
数据：[]
}],
工具提示：{
分享：是的，
十字准星：对
}
});  
函数createGraph（图表选项）{
//打开基本图表
$（文档）.ready（函数（）{
//设置父图表的单击事件
chartOptions.chart.events.click=函数（）{
hs.htmlExpand（document.getElementById（chartOptions.chart.renderTo）{
宽度：1000，
身高：470，
AllowWidthReduce:true，
AlloweightReducement：正确，
内容：假，
对齐：'居中'，
AllowSizeReduce：正确，
调光能力：“0.75”
}, {
图表选项：图表选项
});
};
var图表=新的Highcharts.chart（图表选项）；
});
}
hs.Expander.prototype.onAfterExpand=函数（）{
if（this.custom.chartOptions）{
var chartOptions=this.custom.chartOptions；
如果（！this.hasChart）{
chartOptions.chart.renderTo=$（'.highslide body'）[0]；
chartOptions.chart.events.click=函数（）{}；
var hsChart=新的Highcharts.Chart（图表选项）；
}
this.hasChart=true；
}
};
http://jsfiddle.net/roadrash/GqhEX/
两个问题-在页面上包含
highcharts.js
脚本之前，调用
highcharts（）
方法。此外，您的元素具有类
chartX
，但您使用
chartX
的id调用highcharts。我试图通过类调用它，但它没有显示在模式中。任何其他建议。当然应该有
而不是
。否则，海图就不会出现。第二件事，您有
-您在代码中为这样的ID在哪里创建图表？highchart可以使用类初始化。我从php调用了id，并在id上添加了增量，例如#chart
<script>

createGraph({
                                    chart: {
                                        renderTo: 'chart<?php echo $i; ?>',
                                        type: 'spline',
                                        events: {}
                                    },
                                    title: {
                                        text: '<?php echo $body_stat[$i]->stats_field; ?>'
                                    },
                                    subtitle: {
                                        text: 'Click on chart to Enlarge',
                                    },
                                    xAxis: {
                                        type: 'datetime'
                                    },
                                    plotOptions: {
                                        series: {
                                            pointStart: Date.UTC(2015, 0, 1),
                                            pointInterval: 24 * 3600 * 1000
                                        }
                                    },
                                    credits: {
                                        enabled: false
                                    },
                                    series: [{
                                        name: '<?php echo $this->session->userdata('user_name'); ?>',
                                        data: [<?php $this->stats_model->getBodyStatsValues($body_stat[$i]->stats_field); ?>]
                                    }],

                                tooltip: {
                                    shared: true,
                                    crosshairs: true
                                   }
                                });  
                                function createGraph(chartOptions) {
                                    // open the basic chart
                                    $(document).ready(function () {
                                        // set the click event for the parent chart
                                        chartOptions.chart.events.click = function () {
                                            hs.htmlExpand(document.getElementById(chartOptions.chart.renderTo), {
                                                width: 1000,
                                                height: 470,
                                                allowWidthReduction: true,
                                                allowHeightReduction: true,
                                                preserveContent: false,
                                                align: 'center',
                                                allowSizeReduction: true,
                                                dimmingOpacity: '0.75'
                                            }, {
                                                chartOptions: chartOptions
                                            });
                                        };
                                        var chart = new Highcharts.Chart(chartOptions);
                                    });
                                }
hs.Expander.prototype.onAfterExpand = function () {
    if (this.custom.chartOptions) {
        var chartOptions = this.custom.chartOptions;
        if (!this.hasChart) {
            chartOptions.chart.renderTo = $('.highslide-body')[0];
            chartOptions.chart.events.click = function () {};
            var hsChart = new Highcharts.Chart(chartOptions);
        }
        this.hasChart = true;
    }
};

</script>


    http://jsfiddle.net/roadrash/GqhEX/