javascript 新窗口中的高图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9843941/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highchart in new window
提问by Daniele B
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.
我使用 highcharts 在我的页面中显示图表。它工作正常，但有时图形中的数据过于“浓缩”，所以我应该找到一种方法来查看更大尺寸的图形。
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).
我在互联网上阅读了几篇关于这个主题的帖子： - 通常他们建议使用 highslide，但我不想，因为我的页面已经被脚本覆盖 - 有人试图在弹出窗口中弹出内容，它可能适合对我来说，但我没有成功 - 唯一适合我的准工作示例似乎如下：（在选项对象中我添加了这个属性）。
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
但是它不起作用，因为没有插入 div 标签，我得到的就是这个
<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.
我终于明白这可能是一个可行的策略：创建一个“chartpopup.html”页面，并将构建我可视化的图形副本所需的参数传递给它。
So now I have:
所以现在我有：
index.html:
索引.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:
和 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
采纳答案by Daniele B
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.
在四处游荡并提出问题后，我发现最好的方法是将包含图表的 div 全屏显示。
It's a very simple solution but it works.
这是一个非常简单的解决方案，但它有效。
This post is very helpful How do I make a div full screen?
这篇文章很有帮助如何使div全屏？
A function like the following should do the trick on a "#graph" div:
像下面这样的函数应该可以在“#graph” div 上完成任务：
function fullscr() {
$('#graph').css({
width: $(window).width(),
height: $(window).height()
});
}
Hope this help.
希望这有帮助。
回答by Adrien Schuler
Here is an Highcharts exemple working with an "oldschool" popup :
这是一个使用“oldschool”弹出窗口的 Highcharts 示例：
index.html
索引.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>highcharts foobar</title>
</head>
<body>
<a href="javascript:open_chart_popup();">Open Chart Popup</a>
<script>
function open_chart_popup() {
window.open('popup.html', 'chart popup title', 'width=1680px height=1050px');
}
</script>
</body>
</html>
popup.html
弹出窗口.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>highcharts foobar</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<script>
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
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: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +'°C';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
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]
}]
});
});
</script>
</body>
</html>
If this solution doesn't fit to you, could you tell us which JavaScript libraries you use (this example relies on jQuery). As the documentation says, highcharts requires either jQuery, Mootools or Prototype : http://www.highcharts.com/documentation/how-to-use
如果此解决方案不适合您，您能否告诉我们您使用了哪些 JavaScript 库（此示例依赖于 jQuery）。正如文档所说，highcharts 需要 jQuery、Mootools 或 Prototype：http://www.highcharts.com/documentation/how-to-use
If you are able to use jQuery, you can replace that popup by using some cooler effects like those ones : http://jqueryui.com/demos/dialog/
如果您能够使用 jQuery，则可以使用一些更酷的效果来替换该弹出窗口：http: //jqueryui.com/demos/dialog/
Despite of that, if you want assistance for your script, could you consider making a jsfiddle, i'm not able to reproduce your error.
尽管如此，如果您需要脚本方面的帮助，您能否考虑制作一个jsfiddle，我无法重现您的错误。
EDIT :
编辑 ：
Okay, so you have all the stuff to deal with that.
好的，所以你有所有的东西来处理。
I see two options :
我看到两个选项：
You send the user input
seriesJSON data to your server by an AJAX request. Then your server send you back a view or a bunch of html/js containing your highchart with the user datas. Back to the client, you do wathever you want with that (like triggering a popup containing the graph). I'm not too comfortable with backbone but i'm sure you can generate a template and render it back (this may help http://japhr.blogspot.fr/2011/08/getting-started-with-backbonejs-view.html)The other solution would be to directly set your template (containing the graph) to the view but hidding him by default. Then, when the
seriesare correctly setted by the user, you simply display the template (in a popup for example). This solution avoid a server call, so I would suggest that.
您
series通过 AJAX 请求将用户输入的JSON 数据发送到您的服务器。然后您的服务器向您发送一个视图或一堆包含用户数据的 highchart 的 html/js。回到客户端，您可以随心所欲地使用它（例如触发包含图形的弹出窗口）。我对主干不太满意，但我确定您可以生成一个模板并将其呈现回来（这可能会有所帮助http://japhr.blogspot.fr/2011/08/getting-started-with-backbonejs-view。 html)另一种解决方案是将您的模板（包含图形）直接设置为视图，但默认情况下将其隐藏。然后，当
series用户正确设置时，您只需显示模板（例如在弹出窗口中）。这个解决方案避免了服务器调用，所以我建议这样做。
EDIT 2 :
编辑 2：
So, I've made a jsFiddle showing a basic example on how to update a chart based on a user input : http://jsfiddle.net/MxtkM/
因此，我制作了一个 jsFiddle，展示了如何根据用户输入更新图表的基本示例：http: //jsfiddle.net/MxtkM/
The example updates the last value of all the series on the graph, here is how :
该示例更新图上所有系列的最后一个值，方法如下：
$('#december_value').bind('keyup', function() {
var user_input_value = parseFloat($(this).val()); // cast to float
for (var s in chart.series) { // loop through the series
var old_data = chart.series[s].data;
var new_data = [];
for (var d in old_data ) { // loop through data objects
new_data.push(old_data[d].config); // config property contains the y value
}
new_data[new_data.length - 1] = user_input_value; // update the last value
chart.series[s].setData(new_data); // use setData method to refresh the datas of the serie
}
});
This example use the method setData by providing a new data array.
If this doesn't fit your needs, there is an another method to refresh your graph in whitch you rerender all the graph by doing var chart = new Highcharts.Chart(options);. (This is explained in the links above).
这个例子通过提供一个新的数据数组来使用 setData 方法。如果这不符合您的需要，还有另一种方法可以刷新您的图表，您可以通过执行var chart = new Highcharts.Chart(options);. （这在上面的链接中有解释）。
This two links are also a good read :
这两个链接也很好读：
- Reload chart data via JSON with Highcharts
- http://www.highcharts.com/documentation/how-to-use(part 3 and 4)
Now you shoud be able to do whatever you want with your graph based on a user input.
现在，您应该能够根据用户输入对图表执行任何您想做的事情。
回答by Navas Basheer
The Best solution will be HTML5 Fullscreen API for fullscreen
最佳解决方案将是用于全屏的 HTML5 Fullscreen API
function fullScreen(){
var elem = document.getElementById("highchart_div_id");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
}
However, this piece of code only works in New Generation Browsers and I have hands on working output from Google chromeand Mozilla Firefox
但是，这段代码仅适用于新一代浏览器，我可以亲自处理来自Google chrome和Mozilla Firefox
Good Day
再会
