用我的表格中的某些值製作圖表

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. 爲簡單起見，刪除了預放大事件/函數。