highcharts 选择要显示到图表的行

mcdcgff0 于 2022-11-10 发布在 Highcharts

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

显示图表中选定的数据表
(When我们点击复选框，表格中所选行的数据将显示在图表中），（图表页面在开始加载时必须为空），
简单明了地说，当我单击每个复选框时，它会将其中的数据绘制成图形。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <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/accessibility.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <link
      href="https://unpkg.com/bootstrap-table@1.20.2/dist/bootstrap-table.min.css"
      rel="stylesheet"
    />
    <!-- <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script> -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
    <script src="https://unpkg.com/bootstrap-table@1.20.2/dist/bootstrap-table.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.20.2/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>

    <title>Document</title>
  </head>
  <body>
    <table
      id="table"
      cellpadding="0"
      cellspacing="0"
      data-toggle="table"
      data-filter-control="true"
      data-checkbox-header="false"
      data-click-to-select="true">
      <thead>
        <tr>
          <th data-field="state" data-checkbox="true"></th>
          <th data-field="id" data-filter-control="input">Id</th>
          <th data-field="sum" data-filter-control="input">Sum</th>
          <th data-field="Avg" data-filter-control="input">Avg</th>
          <th data-field="Max" data-filter-control="input">Max</th>
          <th data-field="Min" data-filter-control="input">Min</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <th>001</th>
          <td>60.3</td>
          <td>47.5</td>
          <td>23.8</td>
          <td>36.5</td>
        </tr>
        <tr>
          <td></td>
          <th>002</th>
          <td>20.3</td>
          <td>47.5</td>
          <td>13.9</td>
          <td>25.3</td>
        </tr>
        <tr>
          <td></td>
          <th>003</th>
          <td>50.6</td>
          <td>70.2</td>
          <td>65.9</td>
          <td>45.3</td>
        </tr>
        <tr>
          <td></td>
          <th>004</th>
          <td>20.1</td>
          <td>55.9</td>
          <td>86.4</td>
          <td>75.6</td>
        </tr>
        <tr>
          <td></td>
          <th>005</th>
          <td>33.1</td>
          <td>25.9</td>
          <td>46.4</td>
          <td>10.6</td>
        </tr>
      </tbody>
    </table>

    <figure class="highcharts-figure">
      <div id="container"></div>
    </figure>

    <script>
      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><br/>" +
              this.point.y +
              " " +
              this.point.name.toLowerCase()
            );
          },
        },
      });
    </script>
  </body>
</html>

highcharts

来源：https://stackoverflow.com/questions/72920904/select-row-display-to-chart