在HighChart中使用可编辑的表格，并使图表随着更改而刷新 [英] Using an editable table with HighChart and having the chart refresh with change
问题描述
我正在构建一个使用高图表 - HTML表格中定义的数据的原型，我已经应用了使用jQuery的可编辑功能，以便用户可以编辑这些单元格。问题是：
如果用户在不使用数据库的情况下编辑单元格后，如何获取图表来更新/刷新？我想用一个带有.click事件监听器的按钮来重新加载编辑过的表中的图表。
这只是一个原型，所以我不需要实际的Ajax调用或数据库连接。基本上我需要用户与表格进行互动以反映在图表中。
这是一个非常简化的版本：
< script type =text / javascriptsrc =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>
$（$ {
$（'＃container'）。highcharts（{
data：{
table：document.getElementById（'datatable'）
}，
图表：{
类型：'列'
}，
标题：{
text：'从页面中的HTML表格中提取的数据'
$ b $ A $ {
allowDecimals：false，
title：{
text：'单位'
}
}，
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 ='+'/>）;
$（ （）;
if（e.which == 13）{
var newContent = $（this）.val（）;
$（this）.parent（）。text（newContent）;
$（this）.parent（）。 removeClass（cellEditing）;
}
}）;
$（this）.children（）。first（）。blur（function（）{
$（this） （）;
}）;
}）; ;
< / script>
< / head>
< body>
< div id =containerstyle =min-width：310px; height：400px; margin：0 auto>< / div>
< table id =datatable>
< thead>
< tr>
< th>< / th>
< th> Jane< / th>
John< / th>
< / tr>
< / thead>
< tbody>
< tr>
< th>苹果< / th>
< td> 9< / td>
< td> 4< / td>
< / tr>
< tr>
Pears< / th>
< td> 2< / td>
< td> 0< / td>
< / tr>
< tr>
< th>李子< / th>
< td> 5< / td>
< td> 11< / td>
< / tr>
< tr>
香蕉< / th>
< td> 1< / td>
< td> 1< / td>
< / tr>
< tr>
Oranges< / th>
< td> 2< / td>
< td> 4< / td>
< / tr>
< / tbody>
< / table>
< / body>
< button id =refresh>刷新< / button>
问题在于您没有定义图表：
$（＃refresh）。click（function（）{
var options = chart.options;
chart = new Highcharts.Chart（options）;
}）;
尝试在调用新的HighCharts代码之前定义它：
$（＃refresh）。click（function（）{
var chart = $（'＃container'）。highcharts（）;
var options = chart.options;
chart = new Highcharts.Chart（options）;
}）;
查看示例 here。
另外请注意，您在工具提示中有一些无效的语法以及一些悬挂的逗号。
I am building a prototype that uses High charts - Data defined in a HTML table, I have applied an editable feature using jQuery so that the cells can be edited by the user. The question is:
How do I get the chart to update/refresh after a user edits a cell without using a database? I would like to use a button with an .click event listener to reload the chart from the edited table.
This is just a prototype so I have no need for an actual Ajax call or database connection. Basically I need user interaction with the table to reflect in the chart.
Here is a very simplified version:
<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>
The issue is that you were not defining your chart in:
$("#refresh").click(function() {
var options = chart.options;
chart = new Highcharts.Chart(options);
});
Try defining it before you call the new HighCharts code:
$("#refresh").click(function () {
var chart = $('#container').highcharts();
var options = chart.options;
chart = new Highcharts.Chart(options);
});
See example here.
Also note you have some invalid syntax in the tooltip as well as some dangling commas.
这篇关于在HighChart中使用可编辑的表格，并使图表随着更改而刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
