在使用Laravel Project托管后，HighCharts不显示图形

如何解决在使用Laravel Project托管后，HighCharts不显示图形

在我托管它之前，从某种意义上说，它仍然在localhost HighChart Work Properly上，但是在托管之后，这些图形没有出现。

这是我的HighChart在本地主机上的样子：

这是托管后我的HighChart的样子：

这是我的代码：

<script type="text/javascript">
let datakunjungperbulanchrt =  JSON.parse(`<?php echo $datakunjungperbulanchrt ?>`);
let datapinjamperbulanchrt =  JSON.parse(`<?php echo $datapinjamperbulanchrt ?>`);
Highcharts.chart('myChart',{
    chart: {
        type: 'area'
    },title: {
        text: 'Jumlah pengunjung dan Jumlah Transaksi Bulanan'
    },subtitle: {
        text: ''
    },colors: ['#4E73DF','#F6C23E'],xAxis: {
        categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
    },yAxis: {
        title: {
            text: 'Jumlah'
        }
    },legend: {
        layout: 'vertical',align: 'right',verticalAlign: 'middle'
    },plotOptions: {
        series: {
            allowPointSelect: true
        }
    },series: [{
        name: 'Jumlah Pengunjung',data: datakunjungperbulanchrt
    },{
        name: 'Jumlah Transaksi',data: datapinjamperbulanchrt
    }],responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },chartOptions: {
                legend: {
                    layout: 'horizontal',align: 'center',verticalAlign: 'bottom'
                }
            }
        }]
    }
});
</script>

这是master.blade.php文件中的代码：

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Dashboard</title>

  <!-- Custom fonts for this template-->
  <link rel="stylesheet" href="{{ url('css/dropdownsearch.css')}}" type="text/css">
  <link href="{{ url('icon/css/all.min.css')}}" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="{{url('css/customcol.css')}}" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="{{ url('js/Chart.js')}}"></script>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/exporting.js"></script>
  <script src="https://code.highcharts.com/modules/export-data.js"></script>
  <script src="https://code.highcharts.com/modules/accessibility.js"></script>
  <!-- Custom styles for this template-->
  <link href="{{ url('css/sb-admin-2.min.css')}}" rel="stylesheet">
</head>

这是仪表板控制器的代码，即DashboardController.php：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Transaksi;
use App\Tamu;
use Carbon\Carbon;

class DashboardController extends Controller
{
  public function index()
  {

    $datapinjamperbulan = Transaksi::whereMonth('tanggal_peminjaman','=',Carbon::now()->month)->count();
    $datapinjamperbulanchrt = Transaksi::select(\DB::raw("COUNT(*) as count"))
                                ->whereYear('tanggal_peminjaman',date('Y'))
                                ->groupBy(\DB::raw("Month(tanggal_peminjaman)"))
                                ->pluck('count');

    $datakunjungperbulan = Tamu::whereMonth('tanggal_kunjungan',Carbon::now()->month)->count();
    $datakunjungperbulanchrt = Tamu::select(\DB::raw("COUNT(*) as count"))
                                ->whereYear('tanggal_kunjungan',date('Y'))
                                ->groupBy(\DB::raw("Month(tanggal_kunjungan)"))
                                ->pluck('count');

    return view('admin.dashboard',[
        'datapinjamperbulan'=>$datapinjamperbulan,'datapinjamperbulanchrt'=>$datapinjamperbulanchrt,'datakunjungperbulan'=>$datakunjungperbulan,'datakunjungperbulanchrt'=>$datakunjungperbulanchrt
    ]);
  }
}

这是变量$ datapinjamperbulanchrt的结果：

$datapinjamperbulanchrt Result

这是变量$ datakunjungperbulanchrt的结果：

$datakunjungperbulanchrt Result

解决方法

Highcharts在浏览器上运行，因此从托管服务器还是从本地主机提供服务都没关系。此外，Highcharts实际上正在工作，这就是为什么您看到图表正在渲染的原因。唯一的事情是图表缺少数据。

您可以检查Highcharts是否从PHP变量$ datakunjungperbulanchrt和$ datapinjamperbulanchrt接收数据吗？

另外，浏览器控制台是否显示任何错误？请在以下几行中确认JSON.parse是否正常工作：

let datakunjungperbulanchrt =  JSON.parse(`<?php echo $datakunjungperbulanchrt ?>`);
let datapinjamperbulanchrt =  JSON.parse(`<?php echo $datapinjamperbulanchrt ?>`);

我必须将转换字符串数组添加到整数数组，如下所示：

var datkunjungstr = datakunjungperbulanchrt.map(function(v) { return parseInt(v,10); });
var datpinjamstr = datapinjamperbulanchrt.map(function(v) { return parseInt(v,10); });

在使用Laravel Project托管后，HighCharts不显示图形

如何解决在使用Laravel Project托管后，HighCharts不显示图形

解决方法

相关推荐