Highchart在新窗口 [英] Highchart in new window
问题描述
我用highcharts在我的页面中显示的图表。
它工作正常，但有些时候在图形数据太浓缩，所以我应该找到一种方法，看到一个更大尺寸的图形。
我看了几个职位在互联网上这个问题：
- 一般来说，他们建议使用highslide，但我不希望，因为我的网页已经被脚本overlaoded
-somebody试图弹出在弹出的内容，它可能适合我，但我没有成功
- 这符合我的唯一准工作的例子似乎是以下几点：
（里面的选项对象我添加此属性）。
出口：{
纽扣： {
popUpBtn：{
符号：'广场'，
_titleKey：FullScreenButtonTitle'，
X：-60，
symbolSize：18，
symbolFill：＃B5C9DF'，
hoverSymbolFill：＃779ABF'，
的onclick：函数（）{
VAR赢= window.open（''，''，'位置= 0，标题栏= 0，状态= 0，宽度= 780，高度= 350'）;
win.focus（）;
VAR divtag = win.document.createElement（分区）;
divtag.id =DIV1;
win.document.body.appendChild（divtag）;
win.document.write（'＆LT;脚本类型=文/ JavaScript的SRC =脚本/ highcharts / JS / highcharts.js＆GT;＆LT; / SCRIPT＆GT; \\
＆LT;脚本类型=文/ JavaScript的SRC =脚本/ highcharts / JS /模块/ exporting.js＆GT;＆LT; / SCRIPT＆GT;'）;
this.options.renderTo = divtag;
VAR图=新Highcharts.Chart（this.options）; win.document.close（）;
}
}，
exportButton：{
启用：真
}，
printButton：{
启用：真
} }
}
但它不工作，因为div标签未插入，所有我得到的是这样
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =脚本/ highcharts / JS / highcharts.js＆GT; ＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =脚本/ highcharts / JS /模块/ exporting.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;＆LT; / HTML＆GT;
我无法理解的错误。
我知道这应该是简单，但我不能独自脱身。
- 编辑 -
我终于明白这可能是一个工作的战略：建立一个chartpopup.html页面，并通过它来构建我想象图的副本所需要的参数
。所以现在我有：
index.html的：
chartOptions = {
系列：
{
名称：示例，
数据：[83.6，78.8，98.5，93.4，106.0]
}]
////削减一些code 出口：{
纽扣： {
popUpBtn：{
启用：真实，
符号：'广场'，
_titleKey：FullScreenButtonTitle'，
X：-60，
symbolSize：18，
symbolFill：＃B5C9DF'，
hoverSymbolFill：＃779ABF'，
的onclick：函数（）{
看看这个--------＆GT！; generalPurposeGlobalVar =这一点;
VAR赢= window.open（'./ chartpopup.html，全尺寸表，位置= 0，标题栏= 0，状态= 0，宽度= 780，高度= 650'）; }
}，
exportButton：{
启用：真
}，
printButton：{
启用：真
} }
}
};
this.highChart =新Highcharts.Chart（this.chartOptions）;
和chartpopup.html：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;间的charset =UTF-8＆GT;
＆LT;标题＆GT;图表全尺寸＆LT; /标题＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =脚本/ jQuery的-1.7.1-min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =脚本/ highcharts / JS / highcharts.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =脚本/ highcharts / JS /模块/ exporting.js＆GT; ＆LT; / SCRIPT＆GT; ＆LT; /头＆GT;
＆LT;身体GT; ＆LT; DIV ID =容器的风格=最小宽度：400像素，高度：650;保证金：0汽车＆GT;＆LT; / DIV＆GT; ＆LT;脚本＆GT;
VAR图; $（文件）。就绪（函数（）{ VAR mychart = window.opener.generalPurposeGlobalVar; mychart.options.chart.renderTo ='集装箱';
图=新Highcharts.Chart（mychart.options）;
}）;
＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
这两个页面实际上是用默认的图形唯一的工作。如果我修改和重新渲染图，我不能重现它在弹出的页面上！
在code我用它来修改图形基本上是这样的：
this.chartOptions.series = {[。名称：field.split（_）加入（'\\ n'）}];
this.highChart.destroy（）;
this.highChart =新Highcharts.Chart（this.chartOptions）;
this.highChart.xAxis [0] .setCategories（_的isEmpty（mygroups）[]：？mygroups）;
this.highChart.series [0] .setData（[]）;
this.highChart.setTitle（{文字：this.highChart.title.text}，{文字：（field.split（_）加入（''））}）;
this.highChart.redraw（）; //
[...]
self.highChart.series [0] .addPoint（结果）; //这是我之前计算的点
转悠和提问后，我发现，要做到这一点的最好办法就是让全屏包含图表股利。
这是一个非常简单的解决方案，但它的工作原理。
这职位是非常有帮助的如何使一个div全屏？
像函数以下应该做一个#graph分区的伎俩：
函数fullscr（）{ $（'＃图形'）。的CSS（{
宽度：$（窗口）.WIDTH（）
身高：$（窗口）.height（）
}）; }
希望这有助于。
I use highcharts to display a chart in my page. It works fine, but some times data in graph is too "condensed" so I should find a way to see the graph in a greater size.
I read several posts over internet on this subject: - in general they suggest to use highslide, but i don't want to, as my page is already overlaoded by scripts -somebody tries to pop up the content in a popup, it could fit to me but I didn't succeed - the only quasi-working example which fits to me seems to be the following: (inside the options object I add this properties).
exporting: {
buttons: {
popUpBtn: {
symbol: 'square',
_titleKey: 'FullScreenButtonTitle',
x: -60,
symbolSize:18,
symbolFill: '#B5C9DF',
hoverSymbolFill: '#779ABF',
onclick: function () {
var win=window.open('','','location=0,titlebar=0,status=0,width=780,height=350');
win.focus();
var divtag = win.document.createElement("div");
divtag.id = "div1";
win.document.body.appendChild(divtag);
win.document.write('<script type="text/javascript" src="script/highcharts/js/highcharts.js"></script>\
<script type="text/javascript" src="script/highcharts/js/modules/exporting.js"></script>');
this.options.renderTo=divtag;
var chart = new Highcharts.Chart(this.options);
win.document.close();
}
},
exportButton: {
enabled: true
},
printButton: {
enabled: true
}
}
}
However it is not working, as the div tag is not inserted and all i get is this
<html>
<head>
<script type="text/javascript" src="script/highcharts/js/highcharts.js"> </script>
<script type="text/javascript" src="script/highcharts/js/modules/exporting.js"></script>
</head></html>
I can't understand the error. I know it should be something simple but I can't get out alone.
--EDIT ---
I finally understood which could be a working strategy: create a "chartpopup.html" page, and passing it the parameters needed to build the copy of the graph I visualize.
So now I have:
index.html:
chartOptions = {
series: [
{
name: 'example',
data: [83.6, 78.8, 98.5, 93.4, 106.0]
}]
//// CUT SOME CODE
exporting: {
buttons: {
popUpBtn: {
enabled:true,
symbol: 'square',
_titleKey: 'FullScreenButtonTitle',
x: -60,
symbolSize:18,
symbolFill: '#B5C9DF',
hoverSymbolFill: '#779ABF',
onclick: function () {
look this!--------> generalPurposeGlobalVar = this;
var win=window.open('./chartpopup.html','Full Size Chart','location=0,titlebar=0,status=0,width=780,height=650');
}
},
exportButton: {
enabled: true
},
printButton: {
enabled: true
}
}
}
};
this.highChart=new Highcharts.Chart(this.chartOptions);
and chartpopup.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chart full Size</title>
<script type="text/javascript" src="script/jquery-1.7.1-min.js"></script>
<script type="text/javascript" src="script/highcharts/js/highcharts.js"></script>
<script type="text/javascript" src="script/highcharts/js/modules/exporting.js"> </script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 650; margin: 0 auto"></div>
<script>
var chart;
$(document).ready(function() {
var mychart=window.opener.generalPurposeGlobalVar;
mychart.options.chart.renderTo= 'container';
chart = new Highcharts.Chart(mychart.options);
});
</script>
</body>
</html>
This two pages are actually working ONLY with the default graph. If I modify and re-render the graph, I'm not able to reproduce it on the popup page!
The code I use to modify the graph is basically this:
this.chartOptions.series=[{name:field.split('_').join('\n')}];
this.highChart.destroy();
this.highChart=new Highcharts.Chart(this.chartOptions);
this.highChart.xAxis[0].setCategories(_.isEmpty(mygroups) ? [] : mygroups);
this.highChart.series[0].setData([]);
this.highChart.setTitle({text: this.highChart.title.text},{text:(field.split('_').join(' ')), });
this.highChart.redraw();//
[...]
self.highChart.series[0].addPoint(result);//it's a point I calculated before
After wandering around and asking questions, I found out that the best way to do it is to make fullscreen the div that contains the chart.
It's a very simple solution but it works.
This post is very helpful How do I make a div full screen?
A function like the following should do the trick on a "#graph" div:
function fullscr() {
$('#graph').css({
width: $(window).width(),
height: $(window).height()
});
}
Hope this help.
这篇关于Highchart在新窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
