内置 academy 主题

[visiky]

academy 主题

• 内置 academy 主题风格：整体会比较的紧凑，字体偏小，使用 tableau10 色板

开始使用

// 修改色板
chart.theme({ 
  defaultCategory10: 'tableau10',
  defaultCategory20: 'tableau10',
 });

// 设置主题
chart.theme({ type: 'academy' })

实现思路

• 新增注册 palette.tableau10 色板（从 d3-scale-chromatic 中获取到 SchemaTableau10 色板，然后注册）
• 新增注册 theme.academy 主题

案例验证

/**
 * A recreation of this demo: https://observablehq.com/@d3/stacked-horizontal-bar-chart
 */
import { Chart } from '@antv/g2';

const chart = new Chart({
    container: 'container',
    autoFit: true,
    paddingLeft: 50,
});

// 修改色板
chart.theme({ type: 'academy' })

chart
    .interval()
    .data({
        type: 'fetch',
        value:
            'https://gw.alipayobjects.com/os/bmw-prod/f129b517-158d-41a9-83a3-3294d639b39e.csv',
        format: 'csv',
    })
    .transform({ type: 'sortX', by: 'y', reverse: true, slice: 6 })
    .transform({ type: 'dodgeX' })
    .encode('x', 'state')
    .encode('y', 'population')
    .encode('color', 'age')
    .axis('y', { labelFormatter: '~s' });

chart.render();

[visiky]

d3-scale-chromatic 下的所有色板已经内置了，不需要再注册一次。使用方式：

{
   palette: 'tableau10'
}