Trình bày biểu đồ luôn là một thách thức không nhỏ đối với lập trình viên cho dù bạn sử dụng ngôn ngữ lập trình nào đi chăng nữa. Bây giờ vấn đề đó không còn là quá khó khăn và đáng quan tâm nữa khi nhóm phát triển ứng dụng Highcharts cho ra mắt ứng dụng trình bày biểu đồ của mình. Bạn không cần phải biết bất kì ngôn ngữ lập trình nào ngoài JavaScript.

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!