我在我的统计页面上显示了一些高图图表。我想在同一页面上的模态窗口上显示图形。但是它没有显示在模态窗口中。我在模态和页面图表上调用了相同的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">×</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'); ?>
答案 0 :(得分：1)
我使用highslide完成了这项工作，并在头部调用了我的高图和高滑动脚本。现在点击图表打开模态窗口。 这是小提琴。
<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/
答案 1 :(得分：0)
尝试使用jquery打开模态：
$("#modalId").modal("show");