用我的表格中的某些值制作图表

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格式的功能：

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 
    }); 
    } 
} 

而且这里是你的图和表作为工作示例：

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

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

1. 更新了generateChartData函数代码，将HTML表格解析为JSON;
2. 添加chart.dataDateFormat = "YYYY-MM-DD HH:NN:SS";行以指示数据中的日期/时间格式，以便图表正确解析它; （没有指定日期格式，它可能无法在一些旧版浏览器和字符串日期/时间中正常工作）
3. 为简单起见，删除了预放大事件/函数。