VisActor VBI
  • Tiếng Việt

      • HierarchySankey

      Sankey phân cấp doanh số theo khu vực

      Hiển thị biểu đồ sankey phân cấp cho thấy doanh số chảy từ khu vực đến quốc gia rồi đến thành phố.

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "hierarchySankey",
  "dataset": [
    {
      "region": "Asia",
      "country": "China",
      "city": "Beijing",
      "sales": 30
    },
    {
      "region": "Asia",
      "country": "China",
      "city": "Shanghai",
      "sales": 20
    },
    {
      "region": "Asia",
      "country": "Japan",
      "city": "Tokyo",
      "sales": 10
    },
    {
      "region": "Europe",
      "country": "Germany",
      "city": "Berlin",
      "sales": 18
    },
    {
      "region": "Europe",
      "country": "Germany",
      "city": "Munich",
      "sales": 12
    },
    {
      "region": "Europe",
      "country": "France",
      "city": "Paris",
      "sales": 16
    }
  ],
  "dimensions": [
    {
      "id": "region",
      "alias": "Region"
    },
    {
      "id": "country",
      "alias": "Country"
    },
    {
      "id": "city",
      "alias": "City"
    }
  ],
  "measures": [
    {
      "id": "sales",
      "alias": "Sales"
    }
  ],
  "legend": {
    "enable": true,
    "position": "top"
  },
  "label": {
    "enable": true,
    "showDimension": true,
    "showValue": true
  },
  "tooltip": {
    "enable": true
  }
}

  return <VSeedRender vseed={vseedConfig} />
}

      Chiều phân cấp nhiều cấp + một chỉ số

      Hiển thị luồng phân cấp từ đại khu vực đến quốc gia rồi đến kênh, với một chỉ số duy nhất kiểm soát độ lớn của luồng.

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "hierarchySankey",
  "dataset": [
    {
      "region": "Hoa Bắc",
      "country": "Trung Quốc",
      "channel": "Trực tiếp",
      "revenue": 42
    },
    {
      "region": "Hoa Bắc",
      "country": "Trung Quốc",
      "channel": "Đại lý",
      "revenue": 18
    },
    {
      "region": "Hoa Đông",
      "country": "Trung Quốc",
      "channel": "Trực tiếp",
      "revenue": 36
    },
    {
      "region": "Hoa Đông",
      "country": "Trung Quốc",
      "channel": "Thương mại điện tử",
      "revenue": 22
    },
    {
      "region": "Đông Nam Á",
      "country": "Singapore",
      "channel": "Trực tiếp",
      "revenue": 15
    },
    {
      "region": "Đông Nam Á",
      "country": "Malaysia",
      "channel": "Đại lý",
      "revenue": 12
    }
  ],
  "dimensions": [
    {
      "id": "region",
      "alias": "Đại khu vực"
    },
    {
      "id": "country",
      "alias": "Quốc gia"
    },
    {
      "id": "channel",
      "alias": "Kênh"
    }
  ],
  "measures": [
    {
      "id": "revenue",
      "alias": "Doanh thu"
    }
  ],
  "legend": {
    "enable": true,
    "position": "top"
  },
  "label": {
    "enable": true,
    "showDimension": true,
    "showValue": true
  },
  "tooltip": {
    "enable": true
  }
}

  return <VSeedRender vseed={vseedConfig} />
}

      Sankey phân cấp dạng pivot

      Biểu đồ Sankey phân cấp được pivot theo khu vực và năm. Khu vực được ánh xạ vào hàng, năm vào cột, và mỗi ô pivot hiển thị một cây luồng phân cấp độc lập.

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "hierarchySankey",
  "dataset": [
    {
      "region": "East",
      "year": "2023",
      "country": "China",
      "city": "Shanghai",
      "channel": "Direct",
      "sales": 35
    },
    {
      "region": "East",
      "year": "2023",
      "country": "China",
      "city": "Hangzhou",
      "channel": "Partner",
      "sales": 20
    },
    {
      "region": "East",
      "year": "2023",
      "country": "Japan",
      "city": "Tokyo",
      "channel": "Direct",
      "sales": 18
    },
    {
      "region": "East",
      "year": "2024",
      "country": "China",
      "city": "Shanghai",
      "channel": "Direct",
      "sales": 42
    },
    {
      "region": "East",
      "year": "2024",
      "country": "China",
      "city": "Nanjing",
      "channel": "E-commerce",
      "sales": 16
    },
    {
      "region": "East",
      "year": "2024",
      "country": "Japan",
      "city": "Osaka",
      "channel": "Partner",
      "sales": 14
    },
    {
      "region": "West",
      "year": "2023",
      "country": "Germany",
      "city": "Berlin",
      "channel": "Direct",
      "sales": 22
    },
    {
      "region": "West",
      "year": "2023",
      "country": "France",
      "city": "Paris",
      "channel": "Partner",
      "sales": 19
    },
    {
      "region": "West",
      "year": "2023",
      "country": "France",
      "city": "Lyon",
      "channel": "Direct",
      "sales": 11
    },
    {
      "region": "West",
      "year": "2024",
      "country": "Germany",
      "city": "Munich",
      "channel": "Direct",
      "sales": 26
    },
    {
      "region": "West",
      "year": "2024",
      "country": "France",
      "city": "Paris",
      "channel": "E-commerce",
      "sales": 17
    },
    {
      "region": "West",
      "year": "2024",
      "country": "Spain",
      "city": "Madrid",
      "channel": "Partner",
      "sales": 13
    }
  ],
  "dimensions": [
    {
      "id": "country",
      "alias": "Country",
      "encoding": "hierarchy"
    },
    {
      "id": "city",
      "alias": "City",
      "encoding": "hierarchy"
    },
    {
      "id": "channel",
      "alias": "Channel",
      "encoding": "hierarchy"
    },
    {
      "id": "region",
      "alias": "Region",
      "encoding": "row"
    },
    {
      "id": "year",
      "alias": "Year",
      "encoding": "column"
    }
  ],
  "measures": [
    {
      "id": "sales",
      "alias": "Sales"
    }
  ],
  "color": {
    "colorScheme": [
      "#0B6CFF",
      "#3B8BFF",
      "#00A6A6",
      "#4DC3B2",
      "#FF8A00",
      "#FFB347",
      "#7B61FF",
      "#B39DFF"
    ]
  },
  "legend": {
    "enable": true,
    "position": "top"
  },
  "label": {
    "enable": true,
    "showDimension": true,
    "showValue": true
  },
  "tooltip": {
    "enable": true
  }
}

  return <VSeedRender vseed={vseedConfig} />
}

      Tên chỉ số làm chiều phân cấp + một chỉ số

      Đưa chính “tên chỉ số” vào đường dẫn phân cấp để hiển thị luồng của các chỉ số kinh doanh khác nhau trong từng đại khu vực, với một chỉ số dạng số duy nhất kiểm soát độ lớn.

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "hierarchySankey",
  "dataset": [
    {
      "region": "Hoa Bắc",
      "metricName": "Doanh số",
      "value": 42
    },
    {
      "region": "Hoa Bắc",
      "metricName": "Lợi nhuận",
      "value": 12
    },
    {
      "region": "Hoa Đông",
      "metricName": "Doanh số",
      "value": 36
    },
    {
      "region": "Hoa Đông",
      "metricName": "Lợi nhuận",
      "value": 10
    },
    {
      "region": "Hoa Nam",
      "metricName": "Doanh số",
      "value": 28
    },
    {
      "region": "Hoa Nam",
      "metricName": "Lợi nhuận",
      "value": 8
    }
  ],
  "dimensions": [
    {
      "id": "region",
      "alias": "Đại khu vực"
    },
    {
      "id": "metricName",
      "alias": "Tên chỉ số"
    }
  ],
  "measures": [
    {
      "id": "value",
      "alias": "Giá trị chỉ số"
    }
  ],
  "legend": {
    "enable": true,
    "position": "top"
  },
  "label": {
    "enable": true,
    "showDimension": true,
    "showValue": true
  },
  "tooltip": {
    "enable": true
  }
}

  return <VSeedRender vseed={vseedConfig} />
}