将html表数据转换为条形图

dluptydi 于 2021-07-03 发布在 Java

关注(0)|答案(1)|浏览(477)

我一直在处理一些导入到html表中的数据库数据。然后我决定我需要把这些数据放到条形图上。
有办法吗？如果是，你能告诉我怎么做吗？
html（警告代码片段在这里实际上不起作用，但在我的应用程序中起作用）：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
         pageEncoding="ISO-8859-1"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

    <div>
        <a href="http://localhost:8088">Go Back</a>
    </div>

</head>
<body>

<table id = "tableContent">
    <thead>
    <tr>
        <th>Region</th>
        <th>Total Cases</th>
    </tr>
    </thead>
    <tbody>
    <c:forEach var = "covid_table" items ="${covidapi}">
        <tr>
            <td>${covid_table.getName()}</td>
            <td>${covid_table.getTotal_cases()}</td>
        </tr>
    </c:forEach>
    </tbody>

</table>
</body>
</html>

这是我在工作版本中使用的html代码
新html代码：

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

    <div>
        <a href="http://localhost:8088">Go Back</a>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

    <script src="https://code.highcharts.com/highcharts.js"></script>

    <script src="https://code.highcharts.com/modules/data.js"></script>

    <script src="https://code.highcharts.com/modules/exporting.js"></script>

    <script src="https://code.highcharts.com/modules/export-data.js"></script>

    <script type="text/javascript">

        $(function() {

            Highcharts.chart('container', {

                data: {

                    table: 'tableContent'

                },

                chart: {

                    type: 'column'

                },

                title: {

                    text: 'Data extracted from a HTML table in the page'

                },

                yAxis: {

                    allowDecimals: false,

                    title: {

                        text: 'Units'

                    }

                },

                tooltip: {

                    formatter: function() {

                        return '<b>' + this.series.name + '</b><br/>' +

                            this.point.y + ' ' + this.point.name.toLowerCase();

                    }

                }

            });

        });

    </script>

</head>
<body>

<div id="container" style="width: 100%; height: 400px;"> </div>

<table id = "tableContent">
    <thead>
    <tr>
        <th>Region</th>
        <th>Total Cases</th>
    </tr>
    </thead>
    <tbody>
    <c:forEach var = "covid_table" items ="${covidapi}">
        <tr>
            <td>${covid_table.getName()}</td>
            <td>${covid_table.getTotal_cases()}</td>
        </tr>
    </c:forEach>
    </tbody>

</table>
</body>
</html>

Java JavaScript Html charts html-table

来源：https://stackoverflow.com/questions/65161764/get-html-table-data-into-bar-chart

1条答案

按热度按时间

jhiyze9q1#

如果您有来自api的数据，那么您需要更改的是表示层。
下面是一个处理一组数据的小片段（这是一个完整的javascript解决方案）：

const fetchData = async() => {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos')
  const json = await response.json()
  return json
}

const thead1 = document.querySelector('#table > thead')
const tbody1 = document.querySelector('#table > tbody')

const headerHtml = (items) => {
  let html = ''
  html += '<tr><th></th>'
  Object.keys(items[0]).forEach(header => {
    html += `<th>${ header }</th>`
  })
  html += '</tr>'
  return html
}

const bodyHtml = (items) => {
  let html = ''
  items.forEach(item => {
    html += '<tr>'
    html += '<td></td>'
    for (let key in item) {
      html += `<td>${ item[key] }</td>`
    }
    html += '</tr>'
  })
  return html

}

(async function() {
  // get data from the API
  const response = await fetchData()

  // transform data for our requirements
  let transformed = response.reduce((a, c) => {
    if (typeof a[c.userId] === "undefined") a[c.userId] = 0
    a[c.userId] += 1
    return a
  }, {})

  let data = Object.entries(transformed).map(([id, val]) => ({
    id,
    val
  }))

  thead1.innerHTML = headerHtml(data)
  tbody1.innerHTML = bodyHtml(data)

  // create chart:
  Highcharts.chart('container', {
    data: {
      table: 'table'
    },
    chart: {
      type: 'column'
    },
    title: {
      text: 'Data extracted from a HTML table in the page'
    },
    yAxis: {
      allowDecimals: false,
      title: {
        text: 'Units'
      }
    },
    tooltip: {
      formatter: function() {
        return `
          <b>${ this.series.name }</b>
        `
      }
    }
  });

})();


# table {

  border-collapse: collapse;
  border: 1px solid #cacaca;
  width: 200px;
}

# table tr,

# table th,

# table td {

  border: 1px solid #6f6f6f;
}

# table th {

  background: #cacaca;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<script src="https://code.highcharts.com/modules/export-data.js"></script>
<table id="table">
  <thead>
  </thead>
  <tbody>
  </tbody>
</table>
<hr />
<div id="container"></div>

赞(0）回复(0）举报 2021-07-03

我来回答

将html表数据转换为条形图

1条答案

相关问题

热门标签

最新问答