使用我的表

Question

所以我有一个星期，因为我试图解决这个问题，我无法完成它。 我有这张桌子：

<table id= "myTable" style="width:100%">
<tr  class="val">
    <th>value</th>
    @for((c,w)<- map){
    <td>@c</td>
     }
</tr>
<tr class="timp">
    <th>time</th>
    @for(k <- timeList){
        <td> @k</td> 
     }
</tr>
<tr class="data">
    <th>date</th> 
    @for(q <- dateList){ 
    <td>@q </td>
    }
 </tr>

</table>

它看起来像这样：

我想画一张图表。 ... 在x斧头上，我希望得到我的约会和时间......以及y我的价值观。

我尝试循环浏览我的td元素...我尝试了很多库...但我无法获取数据......

例如，现在我正在使用amchart插件。我有这段代码：

<script src="@routes.Assets.at("javascripts/amcharts.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/serial.js")" type="text/javascript"></script>

...

      <script type="text/javascript">
            var chart;

            var chartData = [];

            AmCharts.ready(function () {
                // first we generate some random data
                generateChartData();

                // SERIAL CHART
                chart = new AmCharts.AmSerialChart();
                chart.pathToImages = "@routes.Assets.at("images/images/")";
                chart.dataProvider = chartData;
                chart.categoryField = "date";

                // data updated event will be fired when chart is first displayed,
                // also when data will be updated. We'll use it to set some
                // initial zoom
                chart.addListener("dataUpdated", zoomChart);

                // AXES
                // Category
                var categoryAxis = chart.categoryAxis;
                categoryAxis.parseDates = true; // in order char to understand dates, we should set parseDates to true
                categoryAxis.minPeriod = "mm"; // as we have data with minute interval, we have to set "mm" here.            
                categoryAxis.gridAlpha = 0.07;
                categoryAxis.axisColor = "#DADADA";

                // Value
                var valueAxis = new AmCharts.ValueAxis();
                valueAxis.gridAlpha = 0.07;
                valueAxis.title = "Things Chart";
                chart.addValueAxis(valueAxis);

                // GRAPH
                var graph = new AmCharts.AmGraph();
                graph.type = "line"; // try to change it to "column"
                graph.title = "red line";
                graph.valueField = "visits";
                graph.lineAlpha = 1;
                graph.lineColor = "#d1cf2a";
                graph.fillAlphas = 0.3; // setting fillAlphas to > 0 value makes it area graph
                chart.addGraph(graph);

                // CURSOR
                var chartCursor = new AmCharts.ChartCursor();
                chartCursor.cursorPosition = "mouse";
                chartCursor.categoryBalloonDateFormat = "JJ:NN:SS, YYYY-MM-DD";
                chart.addChartCursor(chartCursor);

                // SCROLLBAR
                var chartScrollbar = new AmCharts.ChartScrollbar();

                chart.addChartScrollbar(chartScrollbar);

                // WRITE
                chart.write("chartdiv");
            });

            // generate some random data, quite different range 
            function generateChartData() {
                // current date
                var firstDate = new Date();
                // now set 1000 minutes back                 
                firstDate.setMinutes(firstDate.getDate() - 1000);

                // and generate 1000 data items
                for (var i = 0; i < 1000; i++) {
                    var newDate = new Date(firstDate);
                    // each time we add one minute
                    newDate.setMinutes(newDate.getMinutes() + i);
                    // some random number      
                    var visits = Math.round(Math.random() * 40) + 10;
                    // add data item to the array                          
                    chartData.push({
                        date: newDate,
                        visits: visits
                    });
                }
            }

            // this method is called when chart is first inited as we listen for "dataUpdated" event
            function zoomChart() {
                // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
                chart.zoomToIndexes(chartData.length - 40, chartData.length - 1);
            }
        </script>



<div class="row">
<div class="col-md-11">
        <div id="chartdiv" style="width:100%; height:400px;"></div>
</div>
</div>

在function generateChartData()我尝试从我的表中选择值...但是当我循环遍历我的元素时 - 图表消失了...这意味着我做得不对...这里我有随机元素的例子，因为我认为我的代码不好，也许这有助于......
那么，我这样做有多棒？可以吗？
谢谢！

这是我正在谈论的图表......也许有些人玩过它...
但任何其他可行的方法对我都有好处......

Answer 1

由于您尚未发布将HTML表解析为JSON数据格式的代码，因此无法深入了解其无效的原因。未显示的图表表明很可能生成的JSON没有按照amCharts预期的方式构建。

但是，这是一个将您的表结构解析为适合您的图表的JSON格式的函数：

fruits.filter(function(x){return x !== 'undefined'}).length

以下是您的图表和表格作为工作示例：

http://codepen.io/amcharts/pen/02590246bc91401ddb138e026b4cf075

以下是我从原始代码中所做的更改列表：

1. 更新了generateChartData函数代码以将HTML表解析为JSON;
2. 添加function generateChartData() { // initialize empty array chartData = []; // get the table var table = document.getElementById( 'myTable' ); // get table rows var rows = table.getElementsByTagName( 'tr' ); // iterate through the <td> elements of the first row // and construct chart data out of other rows as well var values = rows[ 0 ].getElementsByTagName( 'td' ); var times = rows[ 1 ].getElementsByTagName( 'td' ); var dates = rows[ 2 ].getElementsByTagName( 'td' ); for ( var x = 0; x < values.length; x++ ) { chartData.push( { "visits": values[ x ].innerHTML, "date": dates[ x ].innerHTML + " " + times[ x ].innerHTML } ); } } 行以指示数据中的日期/时间格式，以便图表可以正确解析它; （没有指定日期格式，它可能无法在某些旧浏览器和字符串日期/时间中正常工作）
3. 为简单起见，删除了预缩放事件/功能。