Vẽ biểu đồ dễ dàng với Highcharts

Bất kì một dạng biểu đồ nào cũng có thể được vẽ chỉ với Highcharts.

Xem demo

Sử dụng HighChart

Để sử dụng Highcharts, bạn chỉ cần thêm đoạn mã này vào trước </body>. Lưu ý cần có jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

HTML

<div id="my-chart" style="min-width: 1140px; height: 500px; margin: 15px auto 0;"></div>

JavaScript (jQuery)

Bạn có thể xây dựng sẵn một phương thức vẽ biểu đồ để tiện sử dụng.

// Draw Chart Function
function drawChart(chartID, cate, data, title, unit, type = 'line') {
    Highcharts.chart(chartID, {
        chart: {
            type: type
        },
        title: {
            text: title
        },
        xAxis: {
            categories: cate
        },
        yAxis: {
            title: {
                text: unit
            }
        },
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: true
                },
                enableMouseTracking: true
            }, column: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        series: data
    });
}

Ví dụ vẽ một biểu đồ doanh thu.

var revenueCate = ['28/11', '29/11', '30/11', '01/12', '02/12', '03/12', '04/12'];
var revenueData = [{
        name: 'Total revenue',
        data: [900, 850, 990, 1200, 780, 930, 1700]
    }, {
        name: 'Revenue with coupon code',
        data: [300, 400, 200, 250, 540, 120, 800]
    }, {
        name: 'Revenue without coupon code',
        data: [100, 100, 100, 150, 140, 20, 500]
    }];
drawChart('my-chart', revenueCate, revenueData, 'Revenue', 'Thousand VND');

Sử dụng với PHP

Đầu tiên, bạn cần phương thức để chuyển biến của PHP sang biến JavaScript.

<?php
    function js_str($s) {
        if (!is_numeric($s)) {
            return '"' . addcslashes($s, "\0..\37\"\\") . '"';
        } else {
            return addcslashes($s, "\0..\37\"\\");
        }
    }

    function js_array($array) {
        $temp = array_map('js_str', $array);
        return '[' . implode(', ', $temp) . ']';
    }
?>

Hãy xem một ví dụ.

<?php
    $dates = array('28/11', '29/11', '30/11', '01/12', '02/12', '03/12', '04/12');
    $total_rev = array(900, 850, 990, 1200, 780, 930, 1700);
    $with_coupon = array(300, 400, 200, 250, 540, 120, 800);
    $without_coupon = array(100, 100, 100, 150, 140, 20, 500);
?>

<?php echo 'var lbl = ', js_array($dates), ';'; ?>
var data = [{
        name: 'Total revenue',
        data: <?php echo js_array($total_rev); ?>
}, {
        name: 'Revenue with coupon code',
        data: <?php echo js_array($with_coupon); ?>
}, {
        name: 'Revenue without coupon code',
        data: <?php echo js_array($without_coupon); ?>
}];
drawChart('my-chart', lbl, data, 'Revenue', 'Thousand VND');

Chúc các bạn thành công!