标题（Title）

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'interval',
  marginTop: 40,
  data: {
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
  },
  encode: {
    x: 'letter',
    y: 'frequency',
  },
  title: {
    align: 'center', // 图表标题的对齐方式
    size: 28, // 图表标题的高度，默认为 36
    spacing: 4, // 主标题和副标题之间的间距

    // 标题
    title: "我是一个标题 I'am a title", // 图表标题的文本
    titleFontSize: 28, // 图表主标题的字体大小
    titleFontFamily: 'sans-serif', // 图表主标题的字体
    titleFontWeight: 600, // 图表主标题的字体粗细
    titleFill: '#fff', // 图表主标题的文字颜色
    titleFillOpacity: 1, // 图表主标题的文字透明度
    titleStroke: '#000', // 图表主标题的文字描边颜色
    titleLineWidth: 2, // 图表主标题的文字描边线宽
    titleStrokeOpacity: 1, // 图表主标题的文字描边透明度

    // 副标题
    subtitle: "我是一个副标题 I'am a subtitle", // 图表副标题的文本
    subtitleFontSize: 16, // 图表副标题的字体大小
    subtitleFontFamily: 'Arial', // 图表副标题的字体
    subtitleFontWeight: 300, // 图表副标题的字体粗细
    subtitleFill: '#2989FF', // 图表副标题的文字颜色
    subtitleFillOpacity: 1, // 图表副标题的文字透明度
    subtitleStroke: '#000', // 图表副标题的文字描边颜色
    subtitleLineWidth: 1, // 图表副标题的文字描边线宽
    subtitleStrokeOpacity: 0.5, // 图表副标题的文字描边透明度
  },
});

chart.render();

import * as G2 from '@antv/g2';

const { Chart } = G2;
const chart = new Chart({
  container: 'container',
  width: 480,
  height: 160,
});
const container = chart.getContainer();

const alignList = ['center', 'right', 'left'];
const alignMap = alignList.map((p) => {
  return {
    label: p,
    value: p,
  };
});

const data = [
  264, 417, 438, 887, 309, 397, 550, 575, 563, 430, 525, 592, 492, 467, 513,
  546, 983, 340, 539, 243, 226, 192,
];

chart.options({
  data,
  type: 'interval',
  encode: {
    x: (_, idx) => idx,
    y: (d) => d,
  },
  title: {
    align: 'center',
    title: 'This is a chart title.',
    subtitle: 'Displayed are sampled values.',
  },
  axis: false,
});
const handleSetAlign = (align) => {
  chart.options({ type: 'view', title: { align } });
  chart.render(); // 重新渲染图表
};

const selectorContainer = document.createElement('div');
selectorContainer.textContent = '选择标题对齐方式 ';
const selector = document.createElement('select');
selector.innerHTML = alignMap.map(
  (align, index) =>
    `<option value="${align.value}" ${index === 0 ? 'selected' : ''}>${
      align.label
    }</option>`,
);
selector.onchange = (e) => {
  handleSetAlign(e.target.value);
};
selectorContainer.appendChild(selector);
container.insertBefore(selectorContainer, container.childNodes[0]);
chart.render();

import { Chart } from '@antv/g2';

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

chart.options({
  type: 'view',
  title: {
    align: 'right',
    title: 'Sold by genre, sorted by sold',
    titleFontSize: 15,
    subtitle: 'It shows the sales volume of genre, sored by sold.',
    subtitleFill: 'red',
    subtitleFontSize: 12,
    subtitleShadowColor: 'yellow',
    subtitleShadowBlur: 5,
    subtitleFontStyle: 'italic',
  },
});

chart.options({
  type: 'interval',
  data: [
    { genre: 'Sports', sold: 0 },
    { genre: 'Strategy', sold: 115 },
    { genre: 'Action', sold: 120 },
    { genre: 'Shooter', sold: 350 },
    { genre: 'Other', sold: 150 },
  ],
  encode: { x: 'genre', y: 'sold', color: 'genre' },
  style: { minHeight: 50 },
});

chart.render();