通过单击图形在同一页面上以模式显示高图表
Show highchart graph in modal on same page by clicking on graph
我在我的统计页面上显示了一些图表图表。我想在相同的 page.But 上显示模态 window 上的图形，它没有显示在模态 window 中。我在模式和页面图表上调用了相同的 id。我认为这是某种身份冲突。我还尝试通过 class 初始化图形，但没有发生。这是我的代码。
<?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'); ?>
尝试使用 jquery 打开模态：
$("#modalId").modal("show");
我已经使用 highslide 完成了这项工作，并在头部调用了我的 highchart 和 highslide 脚本。现在通过单击图表打开模式 window。
这是 fiddle.
<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/
我在我的统计页面上显示了一些图表图表。我想在相同的 page.But 上显示模态 window 上的图形，它没有显示在模态 window 中。我在模式和页面图表上调用了相同的 id。我认为这是某种身份冲突。我还尝试通过 class 初始化图形，但没有发生。这是我的代码。
<?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'); ?>
尝试使用 jquery 打开模态：
$("#modalId").modal("show");
我已经使用 highslide 完成了这项工作，并在头部调用了我的 highchart 和 highslide 脚本。现在通过单击图表打开模式 window。 这是 fiddle.
<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/