Вот пример Highcharts, работающий с всплывающим окном "oldschool":
index.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
<!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>
Если это решение вам не подходит, не могли бы вы рассказать нам, какие библиотеки JavaScript вы используете (в этом примере используется jQuery).Как сказано в документации, для старших графиков требуются jQuery, Mootools или Prototype: http://www.highcharts.com/documentation/how-to-use
Если вы можете использовать jQuery, вы можете заменить это всплывающее окно, используя некоторые более крутые эффекты, такие как:*
Несмотря на это, если вам нужна помощь для вашего сценария, не могли бы вы сделать jsfiddle , я не могу воспроизвести вашу ошибку.
РЕДАКТИРОВАТЬ:
Хорошо, так что у вас есть все, что нужно для этого.
Я вижу два варианта:
Вы отправляетепользователь вводит series данные JSON на ваш сервер по запросу AJAX.Затем ваш сервер отправляет вам обратно представление или набор html / js, содержащих вашу старшую диаграмму с данными пользователя.Возвращаясь к клиенту, вы делаете с ним все, что хотите (например, вызываете всплывающее окно, содержащее график).Мне не очень удобно работать с магистралью, но я уверен, что вы можете сгенерировать шаблон и отрендерить его (это может помочь http://japhr.blogspot.fr/2011/08/getting-started-with-backbonejs-view.html)
Другим решением было бы установить ваш шаблон напрямую (содержащийграфик), но скрывает его по умолчанию. Затем, когда пользователь правильно установит series, вы просто отображаете шаблон (например, во всплывающем окне). Это решение позволяет избежать вызова сервера, поэтому я бы предложилчто.
РЕДАКТИРОВАТЬ 2:
Итак, я сделал jsFiddle, показывающий базовый пример того, как обновить диаграмму на основепользовательский ввод: http://jsfiddle.net/MxtkM/
В примере обновляется последнее значение всех рядов на графике, вот как:
$('#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
}
});
В этом примере используется метод setData путем предоставления новых данных.массив. Если это не соответствует вашим потребностям, есть другой способ обновить график, в котором вы перерисовываете весь график, выполнив var chart = new Highcharts.Chart(options);. (Это объясняется в ссылках выше).
Этодве ссылки также хорошо читаются:
Сейчасвы можете делать с графиком все, что хотите, на основе пользовательского ввода.