高图数据渲染下的引导弹出窗口
Highchart data rendering underneath Bootstrap Popover
我正试图从Highcharts加载一个图表到一个Bootstrap弹出窗口。虽然,序列路径(所有带点的数据)是在图表或弹出窗口下面(或其他地方)呈现的。我有一个非常困难的时间试图调试这个问题,似乎找不到一个方法来解决它。
jQuery(不要不知所措,大部分只是Highchart选项):
$('td.chartSection').each(function () {
var $thisElem = $(this);
$thisElem.popover({
placement: 'top',
trigger: 'hover',
html: true,
container: $thisElem,
delay: {
hide: 500
},
content: function () {
//Loading all the chart data and dates
var chartData = [10.82, 11.79, 12.89, 14.01, 13.01, 10.11, 9.11, 7.02, 8.00, 10.55, 9.00, 11.20, 13.67, 13.56, 17.39, 18.34, 19.90, 19.23, 18.29, 17.10, 18.20, 18.29];
var chartDates = ["01 Apr", "02 Apr", "03 Apr", "04 Apr", "05 Apr", "06 Apr", "07 Apr", "08 Apr", "09 Apr", "10 Apr", "11 Apr", "12 Apr", "13 Apr", "14 Apr", "15 Apr", "16 Apr", "17 Apr", "18 Apr", "19 Apr", "20 Apr", "21 Apr", "22 Apr"];
//Finding the minimum and maximum values within the data
var maxi = Math.max.apply(Math, chartData);
var mini = Math.min.apply(Math, chartData);
$thisElem.append('<span class="largeChart"></span>');
var $largeChart = $('.largeChart');
$largeChart.highcharts({
series: [{
data: chartData,
zIndex: 99999
}],
chart: {
type: 'area',
width: 700,
height: 300
},
title: {
text: ''
},
xAxis: {
categories: chartDates
},
legend: {
enabled: false
},
yAxis: {
max: maxi,
min: mini,
labels: {
formatter: function () {
return this.value;
}
},
title: {
text: null
},
},
tooltip: {
pointFormat: '${point.y}'
},
credits: {
enabled: false
},
exporting: {
enabled: false
}
});
var $finalChart = $largeChart;
$largeChart.remove();
return $finalChart[0].outerHTML;
}
});
});
分解:
首先,我为每个元素创建一个弹出窗口。在content
选项中,我正在运行一个函数并返回一个值,即完成的图表。在函数结束时,在返回之前,我将图表克隆到一个新变量,删除原始图表,并将新图表作为原始outerHTML
返回,因为这就是Bootstrap popover的工作方式。
虽然,我似乎无法在弹出窗口中查看图表系列。
如果您查看下面的演示,并尝试在注释掉70
行($largeChart.remove();
)的情况下运行它,您将注意到该图表实际上成功地呈现了该系列。
更多测试:
此外,如果你运行这个DEMO.....
Chrome -进入您的开发人员工具,找到表内的第一个td
元素,范围下降到svg
元素,然后找到通过Bootstrap应用的类svg:not(:root)
…将值更改为其他任何值,序列将被显示。
Firefox -在动画完成之前,该系列一直显示,然后消失。
演示工作检查这个,我有同样的问题,我设法通过改变几行代码来修复它,既然你是追加div到你的弹出窗口父你有2个图表在你的DOM,因此为什么你不应该返回outerHTML
return $largeChart;
代替
var $finalChart = $largeChart;
$largeChart.remove();
return $finalChart[0].outerHTML;
这里是工作演示
http://jsfiddle.net/J88gH/3/还需要删除所有类为largeChart
的元素,以避免出现多个图形
我也要感谢你的问题,你帮我解决了一些难题,我一直在努力一段时间
- 用javascript将数据从一个窗口传递到另一个窗口
- 如何通过所选索引(AngularJS)在模态弹出窗口中显示数据
- 无法在关闭弹出窗口时传递可观察的数据
- Jquery Onclick将数据发送到新打开的窗口
- 如何从弹出窗口将数据传递到父窗口
- 基本html页面和弹出窗口之间的数据交换
- 如何通过单击数据在新窗口上显示TableView数据
- 如何将数据传递给 jsp 并从 servlet 在新窗口中打开它
- 动态弹出窗口'通过调用一个永远运行并返回's每个周期后的数据
- 如何自定义数据::confirm弹出窗口以提示输入,该输入将附加到请求参数中
- 将数据从弹出窗口返回到父窗口(SMARTY)
- 模态窗口yii2中的Ajax验证数据
- 数据绑定上下文中的引导弹出窗口
- Powerbuilder/Javascript HTML数据窗口SetItem日期时间失败
- 调整窗口大小时更新数据属性
- 在javascript(客户端)中跨多个窗口共享数据
- AngularJS模态窗口数据/对象流
- 弹出窗口数据变量传递
- 剑道窗口数据绑定不工作
- 输入字段更改后的小窗口数据表过滤