从dataTable动态显示图表

Question

我想使用Amcharts显示图表，我有一个使用数据库中的count/groupBy的dataTable。现在，我想动态显示图表，我想迭代dataTable并连续地在chartData数组中创建第一列和第二列。 这是我的dataTable：

Stat.xhtml

<h:form id="ff">
<rich:dataTable id="tablereparation"  value="#{stat.results}" var="rep">
<h:column headerClass="headerleftfacet">
<h:outputText id="np"  value="#{rep[0]}" /></h:column>
<h:column headerClass="headermiddlefacet">
<h:outputText id="nbpanne" value="#{rep[1]}" />
</h:column>
</rich:dataTable>
</h:form>

test.js

var chart;
var legend;
//my attempt
var table = document.getElementById('ff:tablereparation');
var rows = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++) {
    var cells = rows[i].getElementsByTagName("td");

    for (var j = 0; j <= 0; j++) {
        var cell = cells[j];
      alert(cells.innerHtml);
    }

}

var chartData = [{
    panne: ?,
    percpangrave: ?
}];


chart = new AmCharts.AmPieChart();
chart.dataProvider = chartData;
chart.titleField = "panne";
chart.valueField = "percpangrave";
chart.outlineColor = "#FFFFFF";
chart.outlineAlpha = 0.8;
chart.outlineThickness = 2;

legend = new AmCharts.AmLegend();
legend.position = "bottom";
legend.align = "center";
legend.markerType = "square";
legend.valueText = "";
chart.addLegend(legend);

chart.write("chartdiv1");

Answer 1

对于那种dataTable HTML一无所知，用于读取单元格信息的JavaScript看起来并不正确。您可以直接从rows变量获取行的单元格，因为每个<tr>包含一个关联的cells数组，只需将innerHTML值拉出它们并动态填充数组。下面是一个示例，它还演示了通过querySelectorAll获取行的更快捷方式：

＆＃13;

＆＃13;

var chart;
var legend;
//var table = document.getElementById('ff:tablereparation');
//var rows = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
//shorter way of doing this: 
var rows = document.querySelectorAll("#ff\\:tablereparation tr"); //note double slash to escape the colon as a literal character since it's a selector in css
var chartData = [];

for (var i = 0; i < rows.length; i++) {
  chartData.push({
    panne: rows[i].cells[0].innerHTML,
    percpangrave: rows[i].cells[1].innerHTML
  });
}


chart = new AmCharts.AmPieChart();
chart.dataProvider = chartData;
chart.titleField = "panne";
chart.valueField = "percpangrave";
chart.outlineColor = "#FFFFFF";
chart.outlineAlpha = 0.8;
chart.outlineThickness = 2;

legend = new AmCharts.AmLegend();
legend.position = "bottom";
legend.align = "center";
legend.markerType = "square";
legend.valueText = "";
chart.addLegend(legend);

chart.write("chartdiv1");

＆＃13;

#chartdiv1 {
  width: 100%;
  height: 300px;
}

＆＃13;

<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/pie.js"></script>
<table border="1" id="ff:tablereparation">
  <tbody>
    <tr>
      <td>Title 1</td>
      <td>30</td>
    </tr>
    <tr>
      <td>Title 2</td>
      <td>10</td>
    </tr>
    <tr>
      <td>Title 3</td>
      <td>60</td>
    </tr>
    <tr>
      <td>Title 4</td>
      <td>40</td>
    </tr>
  </tbody>
</table>

<div id="chartdiv1"></div>

＆＃13;

＆＃13;

＆＃13;