README

为 Laravel 5 提供的 Highcharts 包

安装

将包添加到 composer.json

composer require muhamadrezaar/highcharts:dev-master

在 Laravel 5.5 中，服务提供器将自动注册。在框架的旧版本中，只需将服务提供器和外观添加到 config/app.php 文件中

提供者

RezaAr\Highcharts\Provider::class,

外观

'Chart' => RezaAr\Highcharts\Facade::class,

然后发布配置

php artisan vendor:publish

基本用法

在控制器或其他类中

<?php
    $chart1 = \Chart::title([
        'text' => 'Voting ballon d`or 2018',
    ])
    ->chart([
        'type'     => 'line', // pie , columnt ect
        'renderTo' => 'chart1', // render the chart into your div with id
    ])
    ->subtitle([
        'text' => 'This Subtitle',
    ])
    ->colors([
        '#0c2959'
    ])
    ->xaxis([
        'categories' => [
            'Alex Turner',
            'Julian Casablancas',
            'Bambang Pamungkas',
            'Mbah Surip',
        ],
        'labels'     => [
            'rotation'  => 15,
            'align'     => 'top',
            'formatter' => 'startJs:function(){return this.value + " (Footbal Player)"}:endJs', 
            // use 'startJs:yourjavasscripthere:endJs'
        ],
    ])
    ->yaxis([
        'text' => 'This Y Axis',
    ])
    ->legend([
        'layout'        => 'vertikal',
        'align'         => 'right',
        'verticalAlign' => 'middle',
    ])
    ->series(
        [
            [
                'name'  => 'Voting',
                'data'  => [43934, 52503, 57177, 69658],
                // 'color' => '#0c2959',
            ],
        ]
    )
    ->display();

    return view('welcome', [
        'chart1' => $chart1,
    ]);


?>

在 Blade 中

<div id="chart1"></div>

{!! $chart1 !!}

输出

该包将在你的视图中生成以下代码

<script src="//code.highcharts.com/highcharts.js"></script>
<script src="//code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script type="text/javascript">
    Highcharts.chart( {
    title: {
        "text": "Voting ballon d`or 2018"
    }
    , subtitle: {
        "text": "This Subtitle"
    }
    , yAxis: {
        "text": "This Y Axis"
    }
    , xAxis: {
        "categories":["Messi", "CR7", "Bambang Pamungkas", "Del Piero"], "labels": {
            "rotation":15, "align":"top", "formatter":function() {
                return this.value + " (Footbal Player)"
            }
        }
    }
    , legend: {
        "layout": "vertikal", "align": "right", "verticalAlign": "middle"
    }
    , series: [ {
        "name": "Voting", "data": [43934, 52503, 57177, 69658]
    }
    ], chart: {
        "type": "line", "renderTo": "chart1"
    }
    , colors: ["#0c2959"], credits:false
}

);
</script>

cdn highcharts.js 和其他 js 只生成一次

许可证

https://reza.mit-license.org/

请买我一杯咖啡 https://trakteer.id/mreza.id