0

我正在构建一个使用高图表的原型 - 在 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>
4

2 回答 2

2

韦格尔德是正确的。
你可以试试这个小提琴，它只是更新系列数据并在之后刷新图表。

这不会从头开始重新创建图表，而只会更新它。
这是更多的代码，但根据您的用例，这可能很有用。

这是有问题的代码：

$('#container').highcharts({
    // [...]
    series : [{ id: 'series1' }, { id: 'series2' }]
});

$("#refresh").click(function() {

    var complete = function(options) {
        // get the two HC-series objects
        var chart = $('#container').highcharts();
        var series1 = chart.get('series1');
        var series2 = chart.get('series2');

        // set new data
        series1.setData(options.series[0].data, false);
        series2.setData(options.series[1].data, false);

        // and redraw chart
        chart.redraw();
    };

    // call the data parser of HC
    Highcharts.data({
        table : document.getElementById('datatable'),
        complete : complete
    });
});
于 2013-09-12T17:41:48.493 回答
0

问题是您没有在以下位置定义图表：

$("#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);
});

请参见此处的示例。

另请注意，工具提示中有一些无效的语法以及一些悬空的逗号。

于 2013-09-12T17:11:17.010 回答