jquery获取表格数据

在jQuery中，我们可以使用各种图表库来创建和显示图表，这些图表库通常提供了一些方法来获取和设置数据源，以下是一些常见的图表库及其获取数据源的方法：

1、jQuery Flot

jQuery Flot是一个流行的JavaScript图表库，它可以用于创建各种类型的图表，如折线图、柱状图、饼图等，要获取数据源，我们需要首先创建一个Flot实例，然后使用setData方法设置数据源，以下是一个示例：

// 引入jQuery和jQuery Flot库
<script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
// 创建一个HTML表格作为图表的数据源
<table id="datatable">
  <thead>
    <tr>
      <th>日期</th>
      <th>销售额</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>20220101</td>
      <td>1000</td>
    </tr>
    <tr>
      <td>20220102</td>
      <td>1500</td>
    </tr>
  </tbody>
</table>
// 初始化Flot实例并设置数据源
<script>
$(function() {
  var data = []; // 用于存储数据的数组
  var options = { // 图表选项
    series: {
      lines: { show: true }, // 显示折线图
      points: { show: true } // 显示数据点
    },
    xaxis: { mode: "time" }, // x轴表示时间
    yaxis: { min: 0 } // y轴最小值为0
  };
  // 从表格中获取数据并设置到Flot实例中
  $("#datatable").find("tbody tr").each(function() {
    var date = $(this).find("td:first").text(); // 获取日期
    var sales = parseInt($(this).find("td:last").text()); // 获取销售额（转换为整数）
    data.push([date, sales]); // 将数据添加到数组中
  });
  var plot = $.plot("#chart", [data], options); // 使用Flot绘制图表
});
</script>

2、jQuery Highcharts

jQuery Highcharts是另一个流行的JavaScript图表库，它支持多种图表类型，如折线图、柱状图、饼图等，要获取数据源，我们需要首先创建一个Highcharts实例，然后使用setData方法设置数据源，以下是一个示例：

// 引入jQuery和jQuery Highcharts库
<script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
// 创建一个HTML表格作为图表的数据源
<table id="datatable">
  <thead>
    <tr>
      <th>日期</th>
      <th>销售额</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>20220101</td>
      <td>1000</td>
    </tr>
    <tr>
      <td>20220102</td>
      <td>1500</td>
    </tr>
  </tbody>
</table>
// 初始化Highcharts实例并设置数据源
<script>
$(function() {
  var data = []; // 用于存储数据的数组
  var options = { // 图表选项，这里使用默认值即可，因为我们将在后续设置数据源时覆盖它们
    chart: { type: "line" }, // 图表类型为折线图
    title: { text: "销售额趋势" } // 图表标题为“销售额趋势”
  };
  // 从表格中获取数据并设置到Highcharts实例中
  $("#datatable").find("tbody tr").each(function() {
    var date = $(this).find("td:first").text(); // 获取日期（注意：Highcharts需要日期格式为"YYYYMMDD"）
    var sales = parseInt($(this).find("td:last").text()); // 获取销售额（转换为整数）
    data.push([new Date(date), sales]); // 将数据添加到数组中，注意：Highcharts需要Date对象作为x轴的值，所以我们需要将字符串转换为Date对象
  });
  var chart = new Highcharts.Chart(options, { // 使用Highcharts绘制图表，传入选项和数据源对象（注意：Highcharts的setData方法在这里不可用，我们需要直接在构造函数中传入数据源）}); // Highcharts的构造函数接受一个配置对象和一个数据源对象作为参数，我们在这里传入之前定义的选项和数据源对象来创建图表实例，最后一行代码中的花括号是为了闭合前面的变量声明语句，如果不需要声明变量，可以直接使用var chart = new Highcharts.Chart(options, data);，但是为了提高代码的可读性，我们建议使用变量来存储图表实例。