深入理解TOAST UI Chart中的柱线混合图表(ColumnLine Chart)

深入理解TOAST UI Chart中的柱线混合图表(ColumnLine Chart)

tui.chart 项目地址: https://gitcode.com/gh_mirrors/tui/tui.chart

柱线混合图表(ColumnLine Chart)是一种将柱状图和折线图结合使用的复合图表类型，它能够同时展示不同维度的数据特征。本文将详细介绍TOAST UI Chart库中柱线混合图表的创建、配置和高级用法。

柱线混合图表概述

柱线混合图表结合了柱状图和折线图的优势，通常用于：

• 同时展示数量对比(柱状图)和趋势变化(折线图)
• 比较实际值(柱状图)与平均值/目标值(折线图)
• 展示不同单位但相关联的数据

创建柱线混合图表

TOAST UI Chart提供了两种创建柱线混合图表的方式：

// 方式1：使用构造函数
import { ColumnLineChart } from '@toast-ui/chart';
const chart = new ColumnLineChart({el, data, options});

// 方式2：使用静态方法
import Chart from '@toast-ui/chart';
const chart = Chart.columnLineChart({el, data, options});

参数说明：

• el: 图表渲染的DOM元素(建议使用空元素)
• data: 图表数据
• options: 图表配置项

数据格式规范

柱线混合图表的数据结构包含categories和series两部分：

const data = {
  categories: ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
  series: {
    column: [  // 柱状图系列
      {
        name: 'Seoul',
        data: [11.3, 17.0, 21.0, 24.4, 25.2, 20.4, 13.9]
      },
      // 更多柱状图系列...
    ],
    line: [  // 折线图系列
      {
        name: 'Average',
        data: [11, 15.1, 17.8, 19.7, 19.5, 16.5, 12.3]
      }
    ]
  }
};

核心配置选项

系列可见性控制

通过visible属性可以控制系列初始是否显示：

series: {
  column: [
    {
      name: 'Seoul',
      data: [...],
      visible: false  // 初始隐藏
    }
  ]
}

按分类着色

柱状图系列支持colorByCategories选项，为不同分类使用不同颜色：

series: {
  column: [
    {
      name: 'Seoul',
      data: [...],
      colorByCategories: true  // 按分类着色
    }
  ]
}

选择交互功能

启用selectable选项后，用户可以选择特定系列：

const options = {
  series: {
    selectable: true  // 启用选择功能
  }
};

事件检测类型

eventDetectType控制交互检测方式：

• grouped: 检测同一分类的所有数据点
• point: 只检测鼠标附近的单个数据点

const options = {
  series: {
    eventDetectType: 'point'  // 精确检测单个数据点
  }
};

高级样式配置

数据标签显示

可以全局或单独为柱状图/折线图配置数据标签：

const options = {
  series: {
    dataLabels: {  // 全局配置
      visible: true
    },
    column: {
      dataLabels: {  // 柱状图特有配置
        anchor: 'start'
      }
    },
    line: {
      dataLabels: {  // 折线图特有配置
        offsetY: -15
      }
    }
  }
};

主题定制

通过主题系统可以深度定制图表外观：

const theme = {
  series: {
    colors: ['#70d6ff', '#ff70a6', '#ff9770'],
    column: {
      barWidth: 18  // 柱状图宽度
    },
    line: {
      dot: {
        radius: 6  // 数据点半径
      }
    }
  }
};

最佳实践建议

1. 数据组织：确保柱状图和折线图的数据维度一致，分类数量相同
2. 视觉平衡：调整柱状图宽度和折线图粗细，确保两者视觉权重平衡
3. 颜色搭配：为柱状图和折线图选择对比明显的颜色方案
4. 图例说明：清晰标注不同系列的含义，特别是混合图表需要更详细的说明
5. 响应式设计：考虑在不同屏幕尺寸下的显示效果，必要时调整配置

通过合理配置TOAST UI Chart的柱线混合图表，开发者可以创建出既美观又功能丰富的数据可视化解决方案，有效传达复杂的数据关系。

tui.chart 项目地址: https://gitcode.com/gh_mirrors/tui/tui.chart