Использование редактируемой таблицы с HighChart и обновление диаграммы с изменением
Я строю прототип, который используетВысокие графики - данные, определенные в таблице HTMLЯ применил редактируемую функцию с помощью jQuery, чтобы пользователь мог редактировать ячейки. Вопрос в том:
Как заставить диаграмму обновляться / обновляться после того, как пользователь редактирует ячейку без использования базы данных? Я хотел бы использовать кнопку с прослушивателем событий .click для перезагрузки графика из отредактированной таблицы.
Это всего лишь прототип, поэтому мне не нужен реальный вызов Ajax или соединение с базой данных. В основном мне нужно взаимодействие пользователя с таблицей, чтобы отразить на графике.
Вот очень упрощенная версия:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script>
$(function () {
$('#container').highcharts({
data: {
table: document.getElementById('datatable')
},
chart: {
type: 'column'
},
title: {
text: 'Data extracted from a HTML table in the page'
},
yAxis: {
allowDecimals: false,
title: {
text: 'Units'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.y +' '+ this.x.toLowerCase();
}
},
});
});
$("#refresh").click(function() {
var options = chart.options;
chart = new Highcharts.Chart(options);
});
</script>
<script>
$(function () {
$("#datatable td").dblclick(function () {
var OriginalContent = $(this).text();
$(this).addClass("cellEditing");
$(this).html("<input type='text' value='" +"' />");
$(this).children().first().focus();
$(this).children().first().keypress(function (e) {
if (e.which == 13) {
var newContent = $(this).val();
$(this).parent().text(newContent);
$(this).parent().removeClass("cellEditing");
}
});
$(this).children().first().blur(function(){
$(this).parent().text(OriginalContent);
$(this).parent().removeClass("cellEditing");
});
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<table id="datatable">
<thead>
<tr>
<th></th>
<th>Jane</th>
<th>John</th>
</tr>
</thead>
<tbody>
<tr>
<th>Apples</th>
<td>9</td>
<td>4</td>
</tr>
<tr>
<th>Pears</th>
<td>2</td>
<td>0</td>
</tr>
<tr>
<th>Plums</th>
<td>5</td>
<td>11</td>
</tr>
<tr>
<th>Bananas</th>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th>Oranges</th>
<td>2</td>
<td>4</td>
</tr>
</tbody>
</table>
</body>
<button id="refresh">Refresh</button>