获取javascript highcharts在Bootstrap Popover内渲染 [英] Get javascript highcharts to render inside a Bootstrap Popover
本文介绍了获取javascript highcharts在Bootstrap Popover内渲染的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这是一个jsfiddle 与popover和highcharts js代码。
< a id =demohref =#tabindex =0class =btn btn-lg btn-dangerdata-toggle =popoverdata-trigger =focustitle =Dismiss popoverdata-content =这是一些非常吸引人的内容。对吗?>可用的弹出窗口< / a>
$(function(){
$('#container')。highcharts({
title:{
text:'Monthly Average Temperature ',
x:-20 // center
},
字幕:{
text:'来源:WorldClimate.com',
x:-20
},
xAxis:{
categories:['Jan','Feb','Mar','Apr','May','Jun',
'Jul','Aug '','Sep','Oct','Nov','Dec']
},
yAxis:{
标题:{
text:'Temperature(°C) '
},
plotLines:[{
value:0,
width:1,
color:'#808080'
}]
$,
tooltip:{
valueSuffix:'°C'
},
图例:{
layout:'vertical',
alig n:'right',
verticalAlign:'middle',
borderWidth:0
},
series:[{
name:'Tokyo',
数据:[7.0,6.9,9.5,14.5,18.2,21.5,25.2,26.5,23.3,18.3,13.9,9.6]
},{
名称:'纽约',
数据:[-0.2,0.8,5.7,11.3,17.0,22.0,24.8,24.1,20.1,14.1,8.6,2.5]
},{
名称:'柏林',
数据:[-0.9,0.6,3.5,8.4,13.5,17.0,18.6,17.9,14.3,9.0,3.9,1.0]
},{
名称:'伦敦',
数据:[-0.9,0.6,3.5,8.4,13.5,17.0,18.6,17.9,14.3,9.0,3.9,1.0] [3.9,4.2,5.7,8.5,11.9,15.2,17.0,16.6,14.2,10.3,6.6,4.8]
}]
});
$('#demo')。popover();
});
任何人都可以得到图表来呈现INSIDE弹出窗口?
谢谢!
解决方案
终于在工作了,请参考 fiddle link
$('[data popover({
content:< div id ='container'style ='min-width:300px; display:none;
height:200px; margin:0 '>< div id ='Austin'style ='width:300px; height:
200px;'>< / div>< / div>,
html:true
$ b .click(function(){
var chart_data = getChartData();
var chart = new Highcharts.Chart(chart_data);
$('#container ').show();
});
Title is pretty self-explanatory.
Here is a jsfiddle with the popover and the highcharts js code. Chart only shows if you move targeted div outside the popover.
<a id="demo" href="#" tabindex="0" class="btn btn-lg btn-danger" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
$('#demo').popover();
});
Is anyone able to get the chart to render INSIDE the popover?
Thank you!
解决方案
finally its working , Please refer fiddle link
$('[data-toggle=popover]').popover({
content: "<div id='container' style='min-width: 300px;display:none;
height: 200px; margin: 0'> <div id='Austin' style='width: 300px; height:
200px;'></div></div>",
html: true
})
.click(function() {
var chart_data = getChartData();
var chart = new Highcharts.Chart( chart_data );
$('#container').show();
});
这篇关于获取javascript highcharts在Bootstrap Popover内渲染的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文