HIGHCHART API REFERENCE

Trước khi đi tìm hiểu Highchart API reference có những option nào chúng ta đi tìm hiểu xem Highchart dùng để làm gì?. 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. Highchart hiện tại hỗ trợ chúng ta các dạng biểu đồ sau :

• Line chart : basic line, clickable points, with data labels, time series + zoomable, spline with inverted axes, spline with symbols, spline with symbols, spline with plot bands, logarithmic axis

• Area chart : basic area, area with negative values, stack area, percentage area, area with missing points, inverted axes, area-spline, area range, area range and line, sparkline charts.

• Column and bar charts : basic bar, stscked bar, bar with negative values, stacked column, stacked and grouped column, stack percentage column, column with rotated labels, column with drilldown, fixed placement columns, data defined in a HTML table, column range.

• Pie charts : pie chart, pie with legend, donut chart, semi circle dount, pie with drilldown, pie with gradient fill, pie with monochrome fill.

• Scatter and bubble charts(đồ thị rải) : scatter plot, bubble chart, 3D bubbles.

• Dynamic charts (đồ thị động) : spline updating each second, click to add a point, master-detail chart.

• Combinations (đồ thị tổ họp nhiều kiểu) : column + line and pie, dual axes, line and column, multiple axes, scatter with regression line, meteogram.

• 3D charts : 3D column, 3D column with null and 0 values, 3d column with stacking and grouping, 3D pie, 3D donut, 3D scatter chart.

• Gauges : angular gauge, solid gauge, clock, gauge with dual axes, VU metter.

• Heat maps : heat map, large heat map.

• More chart types : polar chart, spiderweb, wind rose, box plot, error bar, waterfall, funnel chart, pyramid chart, general drawing.

Bài viết về Highchart API Reference này mình sẽ giới thiệu về các chart options nói chung.

Chart :

Giới thiệu về các chart options nói chung Highchart giúp chúng ta vẽ hình dễ dàng và linh hoạt hơn trong lập trình web. Với các option mà highchart mang lại cho chúng ta có thể nói là rất tiện lợi và dễ sử dụng. Tôi xin nói qua một vài option phổ biến và thường dung nhất dưới đây:

• alignTicks : Khi sử dụng nhiều trục trên biểu đồ, ticks của 2 hay nhiều trục đối diện sẽ được tự động sắp xếp các ticks thẳng hàng tương đương. Không sử dụng thì để alignTicks là 0.

• Các option điều chỉnh biểu đồ căn bản: Highchart hỗ trợ rất nhiều các option chỉnh sửa định dạng biểu đồ như :backgroundColor, borderColor, borderRadius, borderWidth, className: add class vào biểu đồ, defaultSeriesType: kiểu của biểu đồ ( ở đây ta có thể dung đơn giản option type), height: độ cao.

• Highchart còn hỗ trợ cả margin, marginBottom, marginLeft, marginRight, marginTop, plotBackgroundColor, plotBackgroundImage, plotBorderColor, plotBorderWidth, plotShadow trong việc điều chỉnh định dạng căn bản chỉ trong biểu đồ

• Hoặc bạn có thể để style, awidth riêng cho chart của bạn. Colors : Các màu mặc định trong High Chart trong mảng sau:

  Colors: [‘7cb5ec’, ‘#434348’, ‘#90ed7d’, ‘#f7a35c’, ‘#8085e9’, ‘#f15c80’, ‘#e4d354’, ‘#8085e8’, ‘#8d4653’, ‘#91e8e1’]

• Credits :Khi vẽ biểu đồ bằng highchart nếu bạn muốn để nguồn highchart bạn có thể dung option credits dạng như sau :

    credits: {
        enabled: true },

Nếu không muốn thì có thể để `enabled: false`

• Hoặc có thể để bất cứ chỗ nào bạn muốn khi thêm option position. Ví dụ như:

    position: {
        align: 'right',
        x: -10, verticalAlign: 'bottom',
        y: -5
    }

• Cài đặt kiểu hiển thị của credits nếu sử dụng option style. Ví dụ :

    style: {
        cursor: 'pointer',
        color: '#909090',
        fontSize: '10px'
    }

• Nếu bạn không muốn để text mặc định là http://www.highcharts.com/ thì bạn có thể thay đổi bằng option text và lưu text theo ý của bạn.

• Drilldown: Một option mang lại hiệu ứng rất đẹp mắt cho người dùng. Thường được sử dụng trong biểu đồ hình cột.

  Có thể tham khảo kỹ trong ví dụ sau : http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/drilldown/labels/

  Trong đó ta thấy :

  activeAxisLabelStyle: kiểu hiển thị text trên trục X,

  activeDataLabelStyle: kiểu hiện thị text trên cột data,

  drillUpButton: thể hiện hiệu ứng của biểu đồ.

• Exporting: giúp bạn export biểu đồ có thể lưu ở dạng ảnh nếu dùng option type. Bạn có thể đặt tên theo ý muốn của bạn nếu dùng option filename.

  Ví dụ về option exporting:

    exporting: {

        sourceWidth: 400,

        sourceHeight: 200,

        scale: 2,

        chartOptions: {

            subtitle: null

        }

    }

• Buttons : bạn có thể cài đặt thuộc tính riêng của button download nếu không muốn dùng cài đặt mặc định của highchart.

  Có rất nhiều option như : align, height, symbolFill, symbolSize : Size của button download, symbolStrokeWidth, symbol1X, symbol1Y, text, theme, verticalAlign, awidth.

  Ví dụ về phần cài đặt button download:

    navigation: {

        buttonOptions: {

            height: 40,

            awidth: 48,

            symbolSize: 24,

            symbolX: 23,

            symbolY: 21,

            symbolStrokeWidth: 2

        }

    }

• Legend: Biểu đồ thì thường có chú thích và khi đó bạn nên sử dụng option legend Bạn có thể thể điều chỉnh vị trí kích thước hay màu sắc,….của legend bằng các option :

  • Align: left hoặc right, center. Hoặc các option khác : awidth, chỉnh theo trục x, y.

  • backgroundColor, borderColor, borderRadius, borderWidth.

  • Nếu bạn không muốn hiện thị legend trong biểu đồ thì bạn có thể sử dụng option enable để ẩn legend đi.

  • Bạn có thể diều chỉnh màu sắc, style cho từng item bằng các option : itemDistance, itemHiddenStyle, itemHoverStyle, itemMarginBottom, itemMarginTop, itemStyle (cài đặt chung), itemWidth.

  • Định dạng legend thì ta dùng option : labelFormatter

• Loading: option này giúp bạn có thể thêm màn hình hiển thị loading hoặc hide màn hình hiện thị loading. Nó là một tiện ích cho nhà phát triển có thể tương tác với dữ liệu cuối cùng hoặc nói cách khác là có thể cập nhật dữ liệu mới nhất. Nó hộ trợ người dùng : hideDuration, showDuration (ẩn, hiện thị loading screen trong bao nhiêu lâu), labelStyle(CSS style), style loading screen.

  Ví dụ:

    style: {
        position: 'absolute',
        backgroundColor: 'white',
        opacity: 0.5,
        textAlign: 'center'
    }

...continue........