AnyChart: So sánh column chart - Day 2

Trong bài viết này, chúng ta sẽ cùng khám phá cách tạo column chart nâng cao

Hiển thị nhiều series data

Dưới đây là column chart, hiển thị data năm 2015 và 2016

anychart.onDocumentReady(function () {

    // create a data set
    var data = anychart.data.set([
      ["John", 10000, 12500],
      ["Jake", 12000, 15000],
      ["Peter", 13000, 16500],
      ["James", 10000, 13000],
      ["Mary", 9000, 11000]
    ]);

    // map the data
    var seriesData_1 = data.mapAs({x: 0, value: 1});
    var seriesData_2 = data.mapAs({x: 0, value: 2});

    // create a chart
    var chart = anychart.column();

    // create the first series, set the data and name
    var series1 = chart.column(seriesData_1);
    series1.name("Sales in 2015");


    // create the second series, set the data and name
    var series2 = chart.column(seriesData_2);
    series2.name("Sales in 2016");

    // set the chart title
    chart.title("Column Chart: Appearance");

    // set the titles of the axes
    chart.xAxis().title("Manager");
    chart.yAxis().title("Sales, $");

    // set the container id
    chart.container("container");

    // initiate drawing the chart
    chart.draw();
});

Demo:

Giải thích

var data = anychart.data.set([ ... ]): Dòng này tạo một tập dữ liệu mới (data set) bằng cách gọi anychart.data.set().. Array bên trong ngoặc vuông [] chứa dữ liệu cho biểu đồ. Mỗi phần tử trong mảng là một mảng con chứa thông tin của một nhân viên:

• Phần tử thứ nhất (index 0): Tên nhân viên (vd: John)
• Phần tử thứ hai (index 1): Thu nhập năm 2015(ví dụ: 10000).Phần tử thứ ba (index 2): Thu nhập năm 2016 (ví dụ: 12500).

Chúng ta có 2 đoạn code

var seriesData_1 = data.mapAs({x: 0, value: 1});
var seriesData_2 = data.mapAs({x: 0, value: 2});

Sử dụng phương thức mapAs() của đối tượng data để ánh xạ dữ liệu cho chuỗi dữ liệu đầu tiên (seriesData_1 - column 1). Tương tự cho column 2