VisActor VSeed
介绍
示例
开发指南
Playground
了解VChart
了解VTable
介绍
示例
开发指南
Playground
了解VChart
了解VTable
简体中文

columnPercent

百分比柱状图

百分比柱状图
1{
2  "chartType": "columnPercent",
3  "dataset": [
4    { "date": "2019", "profit": 10, "sales": 20 },
5    { "date": "2020", "profit": 30, "sales": 60 },
6    { "date": "2021", "profit": 30, "sales": 60 },
7    { "date": "2022", "profit": 50, "sales": 100 },
8    { "date": "2023", "profit": 40, "sales": 80 }
9  ]
10}

组合百分比柱状图

组合百分比柱状图
1{
2  "chartType": "columnPercent",
3  "measures": [
4    {
5      "id": "sales-and-profit",
6      "alias": "销售额与利润",
7      "children": [
8        {
9          "id": "sales",
10          "alias": "sales",
11          "location": "measure"
12        },
13        {
14          "id": "profit",
15          "alias": "利润",
16          "location": "measure"
17        }
18      ]
19    },
20    {
21      "id": "ratio",
22      "alias": "比率",
23      "children": [
24        {
25          "id": "rateOfReturn",
26          "alias": "回报率",
27          "location": "measure"
28        }
29      ]
30    }
31  ],
32  "dataset": [
33    { "date": "2019", "profit": 10, "sales": 20, "rateOfReturn": 0.1 },
34    { "date": "2020", "profit": 20, "sales": 40, "rateOfReturn": 0.2 },
35    { "date": "2021", "profit": 30, "sales": 60, "rateOfReturn": 0.3 },
36    { "date": "2022", "profit": 40, "sales": 80, "rateOfReturn": 0.4 },
37    { "date": "2023", "profit": 50, "sales": 100, "rateOfReturn": 0.5 }
38  ],
39  "dimensions": [
40    {
41      "id": "date",
42      "alias": "日期",
43      "location": "dimension"
44    }
45  ]
46}

透视组合百分比柱状图

1export const PivotColumnPercentChart = memo(() => {
2  const vseed: VSeed = {
3    chartType: 'columnPercent',
4    dimensions: [
5      { id: 'category', alias: '类别', location: 'dimension' },
6      { id: 'date', alias: '日期', location: 'columnDimension' },
7      { id: 'region', alias: '区域', location: 'rowDimension' },
8    ],
9    measures: [
10      {
11        id: 'group-sales',
12        alias: '销售额分组',
13        children: [{ id: 'sales', alias: '销售额' }],
14      },
15      { id: 'profit', alias: '利润' },
16    ],
17    dataset: [
18      { date: '2019', region: 'east', category: 'Grocery', profit: 10, sales: 100 },
19      { date: '2019', region: 'east', category: 'Beverages', profit: 30, sales: 3200 },
20      { date: '2019', region: 'east', category: 'Dairy', profit: 30, sales: 300 },
21      { date: '2019', region: 'east', category: 'Household', profit: 50, sales: 2400 },
22      { date: '2019', region: 'east', category: 'Personal', profit: 40, sales: 500 },
23      { date: '2019', region: 'west', category: 'Grocery', profit: 10, sales: 100 },
24      { date: '2019', region: 'west', category: 'Beverages', profit: 30, sales: 3200 },
25      { date: '2019', region: 'west', category: 'Dairy', profit: 30, sales: 300 },
26      { date: '2019', region: 'west', category: 'Household', profit: 50, sales: 2400 },
27      { date: '2019', region: 'west', category: 'Personal', profit: 40, sales: 500 },
28
29      { date: '2020', region: 'east', category: 'Grocery', profit: 10, sales: 100 },
30      { date: '2020', region: 'east', category: 'Beverages', profit: 30, sales: 3200 },
31      { date: '2020', region: 'east', category: 'Dairy', profit: 30, sales: 300 },
32      { date: '2020', region: 'east', category: 'Household', profit: 50, sales: 2400 },
33      { date: '2020', region: 'east', category: 'Personal', profit: 40, sales: 500 },
34      { date: '2020', region: 'west', category: 'Grocery', profit: 10, sales: 100 },
35      { date: '2020', region: 'west', category: 'Beverages', profit: 30, sales: 3200 },
36      { date: '2020', region: 'west', category: 'Dairy', profit: 30, sales: 300 },
37      { date: '2020', region: 'west', category: 'Household', profit: 50, sales: 2400 },
38      { date: '2020', region: 'west', category: 'Personal', profit: 40, sales: 500 },
39    ],
40  }
41  return <PivotChart vseed={vseed} />
42})
目录