Опубликовано Оставить комментарий

chart.js взаимодействие с php и ajax

php класс генерирующий массивы под chart.js

class chartjs
{
    public $barChardData;
    
    public function __construct()
    {
        $this->createData();
    }

    public function getCount()
    {
        return count($this->barChardData['labels']);
    }
    public function createData()
    {
        $this->barChardData             = array();
        $this->barChardData['labels']   = array();
        $this->barChardData['datasets'] = array();
    }
    public function addBarChardLabels($labels)
    {
        $this->barChardData['labels'] = $labels;
    }
    public function getData()
    {
        return $this->barChardData;
    }
    public function addBarChardData($label, $backgroundColor, $borderColor, $borderWidth, $data, $fill)
    {
        if (count($data) !== count($this->barChardData['labels'])) {
            exit("ERROR");
        }

        $this->barChardData['datasets'][] = array(
            'label'           => $label,
            'backgroundColor' => $backgroundColor,
            'borderColor'     => $borderColor,
            'borderWidth'     => $borderWidth,
            'data'            => $data,
            'fill'            => $fill,
        );
    }
}

использование

        $chart=new chartjs();

        foreach ($month as $year => $val) {

            $chart->addBarChardLabels($month[$year]);

            $c = $this->random_color();

            $chart->addBarChardData($year, $c, $c, 3, $total[$year], 
            false);
        }

        $json['barChardData'] = $chart->barChardData;

обрабатывается это примерно таким аякс запросом

function myChart(json, type) {
    if (window.myBar !== undefined)
        window.myBar.destroy();

    window.myBar = new Chart(ctx, {
        type: type,
        data: json['barChardData'],
        options: {
            responsive: true
        }
    });
}

и на выходе получаем долгожданную диаграмму

Добавить комментарий

Ваш e-mail не будет опубликован.