สร้างกราฟใน Yii Framework 2 ด้วย C3JS Chart

wave
มานพ กองอุ่น 23 พ.ค. 2016 14:09:42 12,275

C3JS เป็น JavaScript Chart ซึ่งสามารถนำมาใช้ได้ภายใต้ MIT License สำหรับ Yii Framework 2 นั้น ผมได้ทำ Package ไว้สำหรับติดตั้งและใช้งาน ดังนี้

การติดตั้ง

สำหรับการติดตั้งพิมพ์คำสั่ง

composer require kongoon/yii2-c3js-chart

 

การใช้งาน

ตัวอย่างการใช้งานใน view ของ Yii2

<?php
use kongoon\c3js\C3JS;
$this->title = 'C3JS Chart';
?>
<h1><?=$this->title?></h1>

<?=C3JS::widget([
    'options' => [
        'data' => [
            'x' => 'x',
            'columns' => [
                ['x', '2016-01-01', '2016-02-01', '2016-03-01', '2016-04-01', '2016-05-01', '2016-06-01'],
                ['data1', 30, 200, 100, 400, 150, 250],
                ['data2', 50, 20, 10, 40, 15, 25]
            ],
            'types' => [
                'data1' => 'bar',
                'data2' => 'bar'
            ],
        ],

        'axis' => [
            'y' => [
                'label' => [
                    'text' => 'Y Label',
                    'position' => 'outer-middle',
                ]
            ],
            'x' => [
                'type' => 'timeseries',
                'tick' => [
                    'format' => '%Y-%m-%d'
                ],
                'label' => [
                    'text' => 'X Label',
                    'position' => 'outer-middle',
                ]
            ]
        ]
    ],

])?>

เสริมเพิ่มเติม

สามารถดูรายละเอียดการตั้งค่าต่างๆ ได้ที่

http://c3js.org/gettingstarted.html

หรือดูตัวอย่างได้ที่

http://c3js.org/examples.html

หากมี Issue สามารถแจ้งได้ที่

https://github.com/kongoon/yii2-c3js/issues

ร่วมด้วยช่วยกันพัฒนานะครับ ^ ^


ความคิดเห็น

หากบทเรียนรู้มีความผิดพลาดประการใด หรือมีข้อเสนอแนะกรุณาแจ้ง contact@programmerthailand.com

เขียนบทเรียนรู้ของคุณ

รายละเอียด
  • ดู 12,275
  • รักเลย 0
  • หมวดหมู่ Yii Framework 2 (Yii2)
  • เขียนเมื่อ
  • แก้ไขเมื่อ
  • Tags yii c3js chart
ข้อมูลผู้เขียน
มานพ กองอุ่น

มานพ กองอุ่น

เป็นสมาชิกเมื่อ: 18 ธ.ค. 2009

เนื้อหาที่เกี่ยวข้อง