du4373 2018-09-20 13:21
浏览 61
已采纳

不在Laravel应用程序中显示谷歌图表[关闭]

I am working with laravel 5.6 and I need displaying categoryname column values in google charts of vehicles table. I have different categorynames in the table. My blade file is as following,

@extends('layouts.app')

    @section('content')
    <title>pie chart</title>
    <script src="{{ url('/js/jquery.js') }}"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
        var analytics = <?php echo $categoryname;  ?>
        google.charts.load('current', {'packages':['corechart']});

        google.charts.setOnLoadCallback(drawChart);

        function drawChart()
        {
            var data = google.visulization.arrayToDataTable(analytics);

            var options = {
                title : 'Presentage of Categories'
            };

            var chart = new google.visulization.PieChart(document.getElementById('pie_chart'));
            chart.draw(data,options);
        }
    </script>
</head>
<body>
<div class="container">
    <h3 align="center">Category Chart</h3>
    <br>

    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-heading">Percentage of Categoryies</h3>
        </div>
        <div class="panel-body">
            <div id="pie_chart" style="width:750px; height: 450px;">

            </div>
        </div>
    </div>
</div>
    </body>
@endsection

and My ChartController is as

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use DB;
class ChartController extends Controller
{
    function index()
    {
        $data = DB::table('vehicles')
              ->select(
                DB::raw('categoryname as categoryname'),
                DB::raw('count(*)as number'))
              ->groupBy('categoryname')
              ->get();
        $array[] = ['Category','Number'];
        foreach($data as $key => $value)
        {
            $array[++$key] = [$value->categoryname, $value->number];
        }
        return view('reports.pie_chart')->with('categoryname', json_encode($array));
    }
}

when I visit blade file I can see Only blade file and not displaying Google chart. How can fix this problem?

app.blade.php

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Acxian</title>

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app">
        <nav class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="col-md-10 col-md-offset-1">
                 <div class="navbar-header">

                    <!-- Collapsed Hamburger -->
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
                        <span class="sr-only">Toggle Navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                    <!-- Branding Image -->
                    <a class="navbar-brand" href="{{ url('/') }}">
                        Acxian
                    </a>
                      <a class="navbar-brand" style="font-size: 15px;"  href="{{ route('vehicles.index') }}">All Ads</a>
                 </div>

                 <div class="collapse navbar-collapse" id="app-navbar-collapse">
                    <!-- Left Side Of Navbar -->
                    <ul class="nav navbar-nav">
                        &nbsp;
                    </ul>

                    <!-- Right Side Of Navbar -->
                    <ul class="nav navbar-nav navbar-right">
                        <!-- Authentication Links -->
                        @if (Auth::guest())
                            <li><a href="{{ route('login') }}">Login</a></li>
                            <li><a href="{{ route('register') }}">Register</a></li>
                        @else
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                                    {{ Auth::user()->name }} <span class="caret"></span>
                                </a>

                                <ul class="dropdown-menu" role="menu">
                                    <li>
                                        <a href="{{ route('logout') }}"
                                            onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                            Logout
                                        </a>

                                        <a href="{{ route('manage.dashboard') }}">

                                            Manage
                                        </a>



                                        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                            {{ csrf_field() }}
                                        </form>
                                    </li>
                                </ul>
                            </li>
                        @endif
                    </ul>
                 </div>
                </div>
            </div>
        </nav>

        @yield('content')
    </div>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}"></script>
@yield('js')
</body>
</html>

console

[["Category","Number"],["Car",1],["Truck",4],["Van",9]] reports:88:3
[Vue warn]: Error compiling template:

<div id="app">
        <nav class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="col-md-10 col-md-offset-1">
                 <div class="navbar-header">

                    <!-- Collapsed Hamburger -->
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
                        <span class="sr-only">Toggle Navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                    <!-- Branding Image -->
                    <a class="navbar-brand" href="http://localhost:8000">
                        Acxian
                    </a>
                      <a class="navbar-brand" style="font-size: 15px;" href="http://localhost:8000/all-ads">All Ads</a>
                 </div>

                 <div class="collapse navbar-collapse" id="app-navbar-collapse">
                    <!-- Left Side Of Navbar -->
                    <ul class="nav navbar-nav">
                        &nbsp;
                    </ul>

                    <!-- Right Side Of Navbar -->
                    <ul class="nav navbar-nav navbar-right">
                        <!-- Authentication Links -->
                                                    <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                                    Nalaka <span class="caret"></span>
                                </a>

                                <ul class="dropdown-menu" role="menu">
                                    <li>
                                        <a href="http://localhost:8000/logout" onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                            Logout
                                        </a>

                                        <a href="http://localhost:8000/manage/dashboard">

                                            Manage
                                        </a>



                                        <form id="logout-form" action="http://localhost:8000/logout" method="POST" style="display: none;">
                                            <input name="_token" value="CzrmFUNluJiJU0SoovSrvWB9dPLVyemjbTmJe8Vt" type="hidden">
                                        </form>
                                    </li>
                                </ul>
                            </li>
                                            </ul>
                 </div>
                </div>
            </div>
        </nav>

            <title>pie chart</title>
    <script src="http://localhost:8000/js/jquery.js"></script>

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>



    <script type="text/javascript">
        var analytics = [["Category","Number"],["Car",1],["Truck",4],["Van",9]];
        console.log(JSON.stringify(analytics));
        google.charts.load('current', {'packages':['corechart']});

        google.charts.setOnLoadCallback(drawChart);

        function drawChart()
        {
            var data = google.visulization.arrayToDataTable(analytics);

            var options = {
                title : 'Presentage of Categories'
            };

            var chart = new google.visulization.PieChart(document.getElementById('pie_chart'));
            chart.draw(data,options);
        }
    </script>


<div class="container">
    <h3 align="center">Category Chart</h3>
    <br>

    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-heading">Percentage of Categoryies</h3>
        </div>
        <div class="panel-body">
            <div id="pie_chart" style="width:750px; height: 450px;">

            </div>
        </div>
    </div>
</div>




    </div>

- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.


(found in <Root>) app.js:32420:7
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html app.js:40393:7
TypeError: google.visulization is undefined[Learn More] reports:95:8 

blade with cdn

<html>
<head>



    <title>pie chart</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <style type="text/css">
        .box{
            width: 600px;
            margin: 0 auto;
            border: 1px solid #ccc;
        }
    </style>


    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>



    <script type="text/javascript">
        var analytics = <?php echo $categoryname;  ?>

        google.charts.load('current', {'packages':['corechart']});

        google.charts.setOnLoadCallback(drawChart);

        function drawChart()
        {
            var data = google.visulization.arrayToDataTable(analytics);

            var options = {
                title : 'Presentage of Categories'
            };

            var chart = new google.visulization.PieChart(document.getElementById('pie_chart'));
            chart.draw(data,options);
        }
    </script>
</head>
<body>
<div class="container">
    <h3 align="center">Category Chart</h3>
    <br>

    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-heading">Percentage of Categoryies</h3>
        </div>
        <div class="panel-body">
            <div id="pie_chart" style="width:750px; height: 450px;">

            </div>
        </div>
    </div>
</div>


</body>

</html>
  • 写回答

1条回答 默认 最新

  • ds3422222222 2018-09-21 07:48
    关注

    it is keyword spelling mistaken of visulization it should be as visualization now it is working

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥500 我要找大模型一体机产品手册和应用案例
  • ¥60 用r语言进行数据分析
  • ¥20 关于游戏c++语言代码问题
  • ¥15 如何制作永久二维码,最好是微信也可以扫开的。(相关搜索:管理系统)
  • ¥15 delphi indy cookie 有效期
  • ¥15 labelme打不开怎么办
  • ¥35 按照图片上的两个任务要求,用keil5写出运行代码,并在proteus上仿真成功,🙏
  • ¥15 免费的电脑视频剪辑类软件如何盈利
  • ¥30 MPI读入tif文件并将文件路径分配给各进程时遇到问题
  • ¥15 pycharm中导入模块出错