Question

我认为我已经完成了正确的步骤来创建html表中定义的数据的高图。但是当我要运行它时，只显示表格，图表无法显示。我的表数据从数据库加载。可能有部分我想念这是我的代码：

var chart1; // globally available
 $(document).ready(function() {
  chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'grafik',
            type: 'column'
        },
        data: {
            table: document.getElementById('aruskas')
        },
        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();
            }
        }
    });
});

<table id="aruskas" class="table table-condensed" style="margin-left: 10px;">

  <thead>
    <tr>
      <th width="100px"></th>
      <th width="100px">Pemasukan</th>
      <th width="100px">Pengeluaran</th>
    </thead>

    <?php
    include '../koneksi.php';

    $sql   = "SELECT DATE_FORMAT(tgl, '%m') as tanggal FROM penjualan WHERE year(tgl)='2016' UNION (SELECT DATE_FORMAT(tanggal, '%m') as tanggal FROM pembelian WHERE year(tanggal)='2016') ORDER BY tanggal ASC";
      $query = mysqli_query($koneksi,$sql)  or die(mysqli_error());
      while( $ret = mysqli_fetch_array($query) ){
        $tgl=$ret['tanggal'];

      /*menghitung pemasukan*/
      $sql_jumlah   = "SELECT sum(total_harga) FROM penjualan where year(tgl)='2016' AND month(tgl)='$tgl' ";        
      $query_jumlah = mysqli_query($koneksi,$sql_jumlah) or die(mysqli_error());
      while( $data = mysqli_fetch_array($query_jumlah) ){
       $jumlah = $data['sum(total_harga)'];                 
     }
     $sql_jumlah1   = "SELECT sum(total) FROM aruskas where year(tgl)='2016' AND month(tgl)='$tgl' and noref like '%CI%' ";        
     $query_jumlah1 = mysqli_query($koneksi,$sql_jumlah1) or die(mysqli_error());
     while( $data1 = mysqli_fetch_array($query_jumlah1) ){
       $jumlah1 = $data1['sum(total)'];                 
     }
     $pemasukan = $jumlah+$jumlah1;

     /*menghitung pengeluaran*/
     $sql_jumlah   = "SELECT sum(total_harga) FROM pembelian where year(tanggal)='2016' AND month(tanggal)='$tgl'  ";        
     $query_jumlah = mysqli_query($koneksi,$sql_jumlah) or die(mysqli_error());
     while( $data = mysqli_fetch_array($query_jumlah) ){
       $jumlah = $data['sum(total_harga)'];                 
     }
     $sql_jumlah1   = "SELECT sum(total) FROM aruskas where year(tgl)='2016' AND month(tgl)='$tgl' and noref like '%CT%' ";        
     $query_jumlah1 = mysqli_query($koneksi,$sql_jumlah1) or die(mysqli_error());
     while( $data1 = mysqli_fetch_array($query_jumlah1) ){
       $jumlah1 = $data1['sum(total)'];                 
     }
     $pengeluaran = $jumlah+$jumlah1;
  
     ?>

    <tbody>
      <tr>
        <th>
          <?php if ($tgl==01) {
        echo "Januari";
      }elseif ($tgl==02) {
        echo "Februari";
      }elseif ($tgl==03) {
        echo "Maret";
      }elseif ($tgl==04) {
        echo "April";
      }elseif ($tgl==05) {
        echo "Mei";
      }elseif ($tgl==06) {
        echo "Juni";
      }elseif ($tgl==07) {
        echo "Juli";
      }elseif ($tgl==8) {
        echo "Agustus";
      }elseif ($tgl==9) {
        echo "September";
      }elseif ($tgl==10) {
        echo "Oktober";
      }elseif ($tgl==11) {
        echo "November";
      }elseif ($tgl==12) {
        echo "Desember";
      }else{

      } ?>
        </th>
        <td><?php echo $pemasukan; ?></td>
        <td><?php echo $pengeluaran; ?></td>
      </tr>
    <?php } ?>
    </tbody>


  </table>

  <div id="grafik"></div>

  <script src="../js/jquery.js"></script>
  <script src="../js/jquery-ui-1.10.4.min.js"></script>
  <script src="../js/jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="../js/jquery-ui-1.9.2.custom.min.js"></script>
 <script src="../js/highcharts.js"></script>

感谢任何帮助。

Answer 1

好吧，我想我已经弄清楚了：图表没有显示的主要原因是你没有包含数据JS文件。

将此行添加到您的php文件下面，其他JS包括：

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

您还缺少表格标题中的结束</tr>。

以下是JS fiddle中的工作解决方案。（没有PHP代码）

请允许我就如何改进代码结构并使其更易于阅读和调试提出建议：

我首先从数据库中收集所有数据并将其存储在数组中。然后（在一个单独的循环中）使用该数组中的数据创建表。

如何使用html表中定义的数据显示高图图形？

1 个答案: