Lưu ý: Bài viết đã lâu không cập nhật, có thể bạn phải tự cập nhật phiên bản mới hơn của Highcharts.
Bất kì một dạng biểu đồ nào cũng có thể được vẽ chỉ với Highcharts.
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!