从 dataTable 动态显示图表

Question

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

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

对那种数据表一无所知HTML，你的JavaScript读取单元格信息看起来不正确。您可以直接从 rows 变量获取行的单元格，因为每个 <tr> 都包含一个关联的 cells 数组，只需从中提取内部 HTML 值并动态填充数组。下面是一个示例，它还演示了一种通过 querySelectorAll:

获取行的更快方法

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

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

<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>

从 dataTable 动态显示图表

Display charts dynamically from dataTable

javascript

xhtml

amcharts