Question

当我在datatable中添加虚拟数据时，会显示图表，但是出于动态目的，我已经使用AJAX加载数据表，并且在加载页面时数据表已经加载了数据。但是当运行相同的javascript时它会显示错误。

在此输入图片说明

外部文件cdn

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<!-- Additional files for the Highslide popup effect -->
<script src="https://www.highcharts.com/media/com_demo/js/highslide-full.min.js"></script>
<script src="https://www.highcharts.com/media/com_demo/js/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://www.highcharts.com/media/com_demo/css/highslide.css" />

我使用的表是

 <table id="report19GraphTable" class="display responsive nowrap" border="2px" style="width: 100%">

                                <thead>

                                <tr>
                                    <th>Range Lab</th>
                                    <th>Range Value</th>


                                </tr>

                                </thead>

                                <tfoot>
                                    <tr>
                                        <th></th>
                                        <th></th>


                                    </tr>
                                </tfoot>
                            </table>
                      <div id="chart"></div>

Ajax请求

<script>


    $(document)
                .ready(
                        function() {
                            var report19GraphData = [];

                            var report19GraphTable = $('#report19GraphTable')
                                    .DataTable(
                                            {
                                                data : report19GraphData,
                                                dom : 'Bfrtip',
                                                buttons : [
                                                        'copy',
                                                        {
                                                            extend : 'excel',
                                                            text : 'Export to Excel',

                                                            messageTop : 'Number of stems/ha in forest by species and DBH class',


                                                            filename : function() {

                                                                return 'report19';
                                                            },
                                                        },

                                                        {
                                                            extend : 'pdf',
                                                            text : 'Export to Pdf',
                                                            messageTop : 'Number of stems/ha in forest by species and DBH class',

                                                            title : '',
                                                            filename : function() {

                                                                return 'report19';
                                                            },
                                                        },
                                                /* {
                                                    extend: 'print',
                                                    messageTop: function () {
                                                        printCounter++;

                                                        if ( printCounter === 1 ) {
                                                            return 'This is the first time you have printed this document.';
                                                        }
                                                        else {
                                                            return 'You have printed this document '+printCounter+' times';
                                                        }
                                                    },
                                                    messageBottom: null
                                                } */
                                                ],
                                                columns : [ {
                                                    "data" : "rangeLab"
                                                }, {
                                                    "data" : "rangeVal"
                                                }]
                                            });

                            $.ajax({
                                url : A_PAGE_CONTEXT_PATH + "/api/report19graph/all",
                                method : "GET",
                                dataType : "json",
                                success : function(response) {
                                    report19GraphData = response.dataList;

                                    report19GraphTable.rows.add(report19GraphData).draw();
                                }

                            });

                        });
    </script>

显示图表的脚本：

<script type="text/javascript">
    let draw = false;

init();

/**
 * FUNCTIONS
 */

function init() {
  // initialize DataTables
  const table = $("#report19GraphTable").DataTable();
  // get table data
  const tableData = getTableData(table);
  // create Highcharts
  createHighcharts(tableData);
  // table events
  setTableEvents(table);
}

function getTableData(table) {
  const rangeArray = [],
    valueArray = [];

  // loop table rows
  table.rows({ search: "applied" }).every(function() {
    const data = this.data();
    rangeArray.push(data[0]);
    valueArray.push(parseInt(data[1].replace(/\,/g, "")));

  });

  // store all data in dataArray
  dataArray.push(rangeArray,valueArray);

  return dataArray;
}

function createHighcharts(data) {
  Highcharts.setOptions({
    lang: {
      thousandsSep: ","
    }
  });

  Highcharts.chart("chart", {
    title: {
      text: "DataTables to Highcharts"
    },
    subtitle: {
      text: "Data from worldometers.info"
    },
    xAxis: [
      {
        categories: data[0],
        labels: {
          rotation: -45
        }
      }
    ],
    yAxis: [
      {
        // first yaxis
        title: {
          text: "Population (2017)"
        }
      },
      {
        // secondary yaxis
        title: {
          text: "Density (P/Km²)"
        },
        min: 0,
        opposite: true
      }
    ],
    series: [

      {
        name: "Density (P/Km²)",
        color: "#FF404E",
        type: "spline",
        data: data[1],
        yAxis: 1
      }
    ],
    tooltip: {
      shared: true
    },
    legend: {
      backgroundColor: "#ececec",
      shadow: true
    },
    credits: {
      enabled: false
    },
    noData: {
      style: {
        fontSize: "16px"
      }
    }
  });
}

function setTableEvents(table) {
  // listen for page clicks
  table.on("page",() => {
    draw = true;
  });

  // listen for updates and adjust the chart accordingly
  table.on("draw",() => {
    if (draw) {
      draw = false;
    } else {
      const tableData = getTableData(table);
      createHighcharts(tableData);
    }
  });
}

</script>

不显示jquery数据表数据的折线图？

0 个答案: