javascript - 用我的表中的一些值制作图表

Question

所以我有一周的时间尝试解决这个问题，但我无法完成它。我有这张 table :

<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 上我的值(value)观。

我尝试遍历我的 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. 为简单起见，删除了预缩放事件/函数。