Cách đặt background image hoặc watermark cho Highchart

Highchart mặc định chỉ cho phép bạn sử dụng nền màu với thuộc tính Fill hoặc backgroundColor, nhưng với thủ thuật nhỏ này có thể giúp bạn thay đổi nền màu nhàm chán bằng những hình background theo ý muốn hoặc làm một wartermark. Làm theo các bước như trong ví dụ sau:

HTML:

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

Javascript:

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            backgroundColor: 'transparent',
            type: 'line'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    });
});

Css:

#container {
    background: url(http://obinb.com/img/chart-bg.png) repeat;
}

Trong ví dụ trên chúng ta sử dụng thuộc tính backgroundColor: 'transparent' để tắt nền chart, sau đó sử dụng css để fill background.

Rất đơn giản phải không nào các bạn? Chúc các bạn thành công!

Xem thêm:
- Hướng dẫn làm banner quảng cáo HTML5
- WebGL là gì? Học lập trình WebGL ở đâu?

- Làm thế nào để thoát một Function trong Javascript?
- Hướng dẫn làm hiệu ứng tuyết rơi bằng Action Script 3 trong Flash
- Tổng hợp những Tag (Thẻ) mới trong HTML5
- Cấu trúc chuẩn của một trang HTML5