Question

我想手动将数据添加到表中然后生成图表，任何人都可以看到我出错的地方吗？。

我查看了其他jQuery图表，例如jqplot和Google图表，但他们没有我想要的东西。

代码

  <!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width"/>
 <link rel="stylesheet" href="themes/theme1.min.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <meta charset="utf-8">



    <link rel="stylesheet" href="jqm/demos/css/themes/default/jquery.mobile-1.3.2.min.css" />


    <script src="jqm/demos/js/jquery.js">
    </script>

    <script src="jqm/demos/js/jquery.mobile-1.3.2.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>

    $(document).ready(function(){
    $('#theform').submit(function(){

        // make remove button and event
        var but = $('<button>remove</button>').click(function(){
            $(this).parent().parent().remove();
        });
        // make button td
        var buttontd = $('<td></td>').append(but);

        // make row
        var tr = $('<tr><td>'+$('#1').val()+'</td><td>'+$('#2').val()+'</td><td>'+$('#3').val()+'</td></tr>').append(buttontd);

        // add row to table
        $('#datatable').append(tr);

        // return false so form is not submitted
        return false;
    });
});


    $(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.point.y +' '+ this.point.name.toLowerCase();
            }
        }
    });
});

</script>
</head>
<body>
      <form id="theform">
    input something<input id="1" type="text"/><br/>
    input something<input id="2" type="text"/><br/>
    input something<input id="3" type="text"/><br/>
    <input type="submit" value="Submit"/>
</form>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>


<table id="datatable">
        <tr>
        <th>heading 1</th>
        <th>heading 2</th>
        <th>heading 3</th>
    </tr>


    </table>
</body>
</html>

Answer 1

有两个问题。

绘制表格后未更新图表
删除按钮会造成一些混乱，试图将其解析为数据点

所以我将图表绘图部分添加到另一个函数中，并为每个表绘图调用它。删除了删除按钮，因此不会对Highcharts造成任何混淆。请参阅Highcharts文档以更新数据点，而无需重新绘制整个图表。

我也添加了

e.preventDefault();

而不是返回false以避免表单提交。

以下是更新后的fiddle

Answer 2

您的代码无法触发重绘图重绘图表。即使你打电话重绘，它也不会起作用，因为你没有告诉highcharts有关新数据。

我建议每次提交表单时使用highcharts API调用addSeries来添加系列，而不是使用数据表。这样可以避免每次重绘整个图表。

尝试这样的事情：

    $('#datatable').append(tr);
    var chart = $('#container').highcharts();
    chart.addSeries({
            data:  [+$('#1').val(),+$('#2').val(),+$('#3').val()]
     });

http://jsfiddle.net/dfpts/

从html表生成图表：JQuery

2 个答案: