HIGHCHART API REFERENCE (Phần 2)

**Highchart phần 2 **

Như đã giới thiệu ở phần một Highchart hỗ trợ coder trong việc vẽ biểu đồ bằng Jquery trong lập trình web hoặc các ứng dụng web. Xem ở link http://viblo.framgia.vn/NguyenThiHue/posts/1ZnbRl5KM2Xo

Phần này tôi sẽ tiếp tục giới thiệu các option cơ bản tiếp theo của Highchart

1. PlotOptions:

   Cấu hình phần hiển thị của series(dữ liệu) trong biểu đồ: có thể thay đổi màu sắc hình dáng, các đặc điểm khác để có thể hiện thị biểu đồ như bạn mong muốn

   Dưới đây là một số thuộc tính cơ bản trong plotOptions

    PlotOptions {

        series : {

            allowPointSelect : true, // Cho phép click vào hình vẽ của series để đánh dấu một series nào đó

            animation: true , // Hiệu ứng hiển thị của series

            color: color, // Màu hiển thị trên biểu đồ của series

            connectNulls: true ,// Nối liền biểu đồ nối các điểm với nhau

            dashStyle: LongDash, // Đường nối liền ở dạng nét đứt. Ở đây bạn có thể hiển thị ở dạng khác : ShortDash, ShortDot, Dash,..

            enableMouseTracking: false, // Không thể click vào series

            }

        }

- `dataLabels`: Chỉnh sửa định dạng của data label: màu sắc, vị trí hiển thị....

    Trong đây có rất nhiều thuộc tính để bạn sử dụng : `align, color, backgroundColor, borderColor, borderRadius, borderWidth`, hoặc dùng `style`: CSSObject để thiết kế cho `data label` theo đúng ý bạn. Nếu bạn không muốn hiện `dataLabels` thì bạn dùng : `enabled : true`. Bạn cũng có thể chỉnh định dạng của `data label` khi dùng: `format`. Còn bạn muốn gọi `function` JavaScript để định dạng `data label` thì bạn nên dùng: `formatter : function() {}`. Bạn cũng có thể điều chỉnh hiện thị phụ thuộc vào trực x và trục y trên biểu đồ bằng cách dùng `x: number`, hoặc `y: number`.

- `Events`: điều chỉnh hiệu ứng, thứ tự hiển thị trên biểu đồ, có thể `hide` hoặc `show` biểu đồ...Bạn có thể thực hiện các `events` khác nhau trên biểu đồ của bạn: click vào `series` thì hiển thị` alert`, hoặc` mouseOut, mouseOver`....

- Bạn có thể điều chỉnh riêng màu của các điểm nút trên biểu đồ nhờ option `fillColor`, hoặc bạn có thể chèn ảnh nào đó khác để hiển thị cho dữ liệu của bạn trên biểu đồ nhờ vào option:

        marker: {
            symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)',
            width: 16,
            height: 16
        }

    hoặc điều chỉnh kích thước các điểm nút dữ liệu cũng bằng option `marker`.

        marker: {
            radius: 19
        }

- Cái quan trọng tiếp theo trong highchat đó là option `tooltip`: tooltip là phần hiển thị động dữ liệu biểu đồ khi mà bạn di chuyển chuột trên biểu đồ của bạn đến điểm nút, hoặc cột của dữ liệu thì sẽ hiển thị lên thông tin mà bạn muốn hiển thị. Thông thường sẽ hiển thị giá trị của điểm nút đó.

    Một ví dụ về `tooltip` khi bạn muốn hiển thị định dạng ngày tháng trên tooltip của một điểm nút dữ liệu thì ta dùng:

        dateTimelabelFormats: {
            day: '%e of %b'
        }

    - Nếu bạn muốn tooltip trả về một định dạng riêng nào đấy bạn có thể viết như sau:

        tooltip: {
            formatter: function() {
                return “định dạng mà bạn muốn”;
            }
        }

    - Nếu biểu đồ của bạn biểu diễn hai hay nhiều mảng dữ liệu khác nhau mà bạn muốn hiển thị tất cả dữ liệu của một cột điểm thì bạn có thể dùng thuộc tính `shared` trong `tooltip`.

- Tất cả các kiểu biểu đồ `area, arearange, areaspline, areasplinerange, bar, boxplot, bubble, column, columnrange, errorbar, funnel, line, pie, pyramid, scatter`.... đều dùng các option với cấu trúc giống nhau nhưng khi hiển thị thì mỗi kiểu lại có một hiển thị khác nhau. Còn tùy thuộc vào yêu cầu biểu đồ mà bạn mong muốn ra sao để sử dụng các option phù hợp với yêu cầu của người dùng.

    Ví dụ nếu người dùng muốn khi click vào điểm nút dữ liệu thì hiển thị thông báo “Bạn đã click” thì bạn có thể làm như sau:

        plotOptions: {

            series: {

                cursor: 'pointer',

                events: {

                    click: function (event) {

                    alert('Bạn đã click' + '\n');

                    }

                }

            }

        }

    Bạn có thể xem và tìm hiểu kỹ càng hơn các option tại đường link : http://api.highcharts.com/highcharts#plotOptions . Trên đây chỉ là những option mà người dùng thường sử dụng. Còn lại bạn có thể tìm hiểu thêm nếu bạn cần một biểu đồ tỉ mỉ hơn.

2. Series:

   Dùng khi muốn điều riêng đồ thị hiển thị của một dữ liệu nào đó. Từ hiển thị màu sắc, hình dáng. Bạn có thể chỉnh cac kiểu hiện thị khác nhau cho từng đối tượng: chỉnh tên, màu sắc, hình dáng của đồ thị, các định dạng khác nhau cho từng đối tượng của đồ thị,…

   Theo tôi nghĩ optionevent rất hay và hữu ích cho người dùng. Nó giúp bạn thể hiển thị các event như:

   • Click: Nếu click vào đồ thị thì hiển thị alert:

        plotOptions: {
            series: {
                click: function () {
                    alert('Category: ' + this.category + ', value: ' + this.y);
                }
            }
        }

    Các option khác cũng rất tiện ích cho người dùng: `mouseOut, mouseOver, remove, select, unselect`, `update`: update dữ liệu

- Maker: Điều chỉnh định dạng của các nút data hiển thị trên đồ thị. Bạn có thể không cho hiển thị các nút trên đồ thị, chỉnh màu, cho to, …

Ví dụ: `option states` giúp bạn điều chỉnh hiển thị khi di chuyển chuột vào các nút trên đồ thị

    plotOptions: {
        series: {
            marker: {
                states: {
                    hover: {
                        fillColor: 'white',
                        lineColor: 'red',
                        lineWidth: 2
                    }
                }
            }
        }
    }

Khi muốn click vào chuột thì mới hiển thị định dạng `marker` thì không dùng` hover` nữa mà dùng `select`

3. Title:

   Cái quan trọng của biểu đồ khi bạn vẽ đó là tiêu đề của biểu đồ. Highchart có hỗ trợ bạn việc đặt tiêu đề theo ý của bạn. Bạn có thể điều chỉnh tiêu đề, kiểu dáng màu sắc hiển thị, xuất hiện ở đâu trên bản đồ hoặc cài đặt style riêng mà bạn muốn. (giống subtitle).

4. Subtitle:

   Khi bạn hiển thị tiêu đề to cho đồ thị rồi nhưng bạn vẫn muôn hiển thị thêm một tiêu đề nhỏ nữa. Vậy bạn có thể dùng thuộc tính subtitle. Bạn có thể điều chỉnh định dạng cho tiêu đề phụ này kiểu dáng màu sắc và hiển thị ở đâu trên bản đồ của bạn.

   Ví dụ : Hiển thịsubtitle kiểu floating, phía dưới bên phải của biểu đồ

    subtitle: {
        text: 'Text subtitle',
        floating: true,
        align: 'right',
        x: -10,
        verticalAlign: 'bottom',
        y: -75
    }

Nếu bạn muốn định dạng 1 `style` riêng thì bạn để trong option style riêng

    style: {
        color: '#FF00FF',
        fontWeight: 'bold'
        }

5. Tooltip:

   Tùy chọn hiển thị chú thích khi người dùng di chuyển chuột vào các nút điểm data trên biểu đồ ở dạng tooltip. Bạn có các tùy chỉnh cho tooltip như: hiển thị bên trái hoặc phải, tùy chỉnh định dạng dữ liệu hiển thị, điều chỉnhbackground, borderWidth, borderColor,..Nếu có cài đặt riêng cho tooltip thì bạn có thể dùng option style

    tooltip: {
        style: {
            padding: 10,
            fontWeight: 'bold'
        }
    }

Nếu bạn muốn hiển thị tất cả các chú thích của các nút dữ liệu khi di chuyển chuột vào bất cứ nút `data` nào thì bạn dùng option `share`

    tooltip: {
        shared: true,
        crosshairs: true
    }

Nếu bạn muốn hiển thị thêm ngày tháng với định dạng` Y-m-d` thì bạn có thể dùng thẻ `xDateFormat`:

    tooltip: {
        xDateFormat: '%Y-%m-%d',
        shared: true
    }

Trên đây là tất cả các option trong Highchart API Reference. Biểu đồ có phù hợp hay không phụ thuộc vào việc bạn sử dụng API như thế nào. Nếu kết hợp tốt thì biểu đồ của chúng ta sẽ được hoàn thiện.