在数据可视化开发中，单一图表往往只能展示一类数据的趋势或对比关系，当我们需要同时展示两类关联但量级不同的数据时，组合图就成了更好的选择。比如展示某产品每个月的销售额（用柱状图体现量级）和同比增长率（用折线图体现趋势），使用FusionCharts实现2D柱状图和折线图的组合图，既能清晰对比不同月份的销售额差异，又能直观看到增长率的变化趋势，大大提升数据的可读性。
FusionCharts组合图的基本原理
FusionCharts的组合图核心是通过配置数据集（dataset）的类型，让同一个图表容器中包含多种图表类型的展示。2D柱状图和折线图的组合，本质是在同一个图表对象中，定义两个以上的数据集，其中一个数据集的type设置为column（柱状图），另一个设置为line（折线图），再通过统一的x轴标签关联数据，最终实现两类图表叠加展示的效果。
需要注意的是，组合图的两种图表共享同一个x轴，但y轴可以根据需求配置为共享同一个y轴，或者分别使用左右两个y轴，避免不同量级的数据挤压导致展示不清晰。比如销售额是千万级，增长率是百分比，这时候分开左右y轴会更合理。
基础环境准备
使用FusionCharts实现组合图前，需要先引入FusionCharts的核心库文件，你可以从官方渠道获取最新的js文件，也可以通过CDN引入。这里以CDN引入为例，在HTML页面的head标签中添加如下代码：
<head>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
</head>上面引入了FusionCharts的核心库和默认的fusion主题，主题可以根据需要调整，不同主题的图表样式会有差异。
组合图的核心配置项
要实现2D柱状图和折线图的组合，需要重点配置以下几个部分：
- 图表基础类型：组合图的基础类型可以设置为mscombi2d，这是FusionCharts内置的多系列组合2D图表类型，专门支持多种图表类型组合。
- 数据集配置：每个数据集通过type字段指定图表类型，column代表柱状图，line代表折线图，同时每个数据集对应一组数据，需要设置系列名称和具体的数据点。
- 坐标轴配置：可以配置是否显示双y轴，左y轴对应柱状图数据，右y轴对应折线图数据，还能分别设置两个y轴的标题、刻度范围等。
- 标签与提示：配置x轴的标签内容，鼠标悬浮时的提示框信息，让图表更易读。
完整实现代码示例
下面是一个完整的可运行示例，展示2019到2024年某产品的年销售额（柱状图）和年增长率（折线图）的组合图：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>FusionCharts 2D柱状图与折线图组合图示例</title>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
</head>
<body>
<div id="chart-container" style="width: 800px; height: 400px;"></div>
<script>
// 组合图配置对象
const chartConfig = {
type: 'mscombi2d', // 多系列2D组合图类型
renderAt: 'chart-container', // 渲染容器的id
width: '100%',
height: '100%',
dataFormat: 'json',
dataSource: {
// 图表基础配置
chart: {
caption: '2019-2024年产品销售额与增长率', // 图表标题
subCaption: '数据来源：内部统计', // 副标题
xAxisName: '年份', // x轴名称
yAxisName: '销售额（万元）', // 左y轴名称
yAxisNameRight: '增长率（%）', // 右y轴名称
showValues: '0', // 不显示柱状图上的数值
showTrendLines: '0', // 不显示趋势线
theme: 'fusion', // 使用的主题
drawCrossLine: '1', // 显示十字交叉线
crossLineColor: '#cccccc', // 十字线颜色
crossLineAlpha: '50', // 十字线透明度
// 双y轴配置
useRightYAxis: '1', // 启用右y轴
rightYAxisMinValue: '0', // 右y轴最小值
rightYAxisMaxValue: '30', // 右y轴最大值
rightYAxisTitleColor: '#0075c2', // 右y轴标题颜色
rightYAxisLineColor: '#0075c2', // 右y轴轴线颜色
rightYAxisTickColor: '#0075c2' // 右y轴刻度颜色
},
// x轴标签数据
categories: [
{
category: [
{ label: '2019' },
{ label: '2020' },
{ label: '2021' },
{ label: '2022' },
{ label: '2023' },
{ label: '2024' }
]
}
],
// 数据集配置
dataset: [
{
seriesName: '年销售额', // 系列名称
type: 'column', // 图表类型为柱状图
data: [
{ value: '1200' },
{ value: '1500' },
{ value: '1800' },
{ value: '2200' },
{ value: '2600' },
{ value: '3000' }
],
color: '#f2c500' // 柱状图颜色
},
{
seriesName: '年增长率',
type: 'line', // 图表类型为折线图
parentYAxis: 'R', // 使用右y轴
data: [
{ value: '10' },
{ value: '25' },
{ value: '20' },
{ value: '22' },
{ value: '18' },
{ value: '15' }
],
color: '#0075c2', // 折线颜色
lineThickness: '3', // 折线宽度
anchorBgColor: '#ffffff', // 数据点背景色
anchorBorderColor: '#0075c2', // 数据点边框色
anchorRadius: '5' // 数据点半径
}
]
}
};
// 渲染图表
FusionCharts.ready(function () {
const chart = new FusionCharts(chartConfig);
chart.render();
});
</script>
</body>
</html>代码说明
上面的示例代码中，首先定义了图表类型为mscombi2d，这是组合图的关键。然后在chart配置项中设置了图表的标题、坐标轴名称、是否启用右y轴等基础属性。
categories部分定义了x轴的标签，这里对应2019到2024年，需要和数据集中的数据点数量一一对应。
dataset部分定义了两个数据集，第一个数据集type为column，对应柱状图的销售额数据，使用左y轴；第二个数据集type为line，对应折线图的增长率数据，通过parentYAxis: 'R'指定使用右y轴，避免和柱状图的数据量级冲突。
最后通过FusionCharts.ready方法初始化并渲染图表，确保库文件加载完成后再执行渲染逻辑。
常见问题与调整方法
如何调整柱状图的宽度？
可以在chart配置项中添加plotSpacePercent字段，设置值为0到100之间的数字，值越大，柱状图之间的间距越小，柱状越宽。比如设置plotSpacePercent: '60'，柱状图的宽度会明显增加。
如何让折线图的数据点更明显？
可以在折线图的数据集配置中调整anchorRadius（数据点半径）、anchorBgColor（数据点背景色）、anchorBorderThickness（数据点边框宽度）等字段，让数据点更突出，方便用户查看具体数值。
如何修改提示框的显示内容？
可以在chart配置项中添加toolTipSepChar设置提示框的分隔符，也可以通过自定义toolTip的样式，或者给每个数据点添加toolText字段，自定义悬浮时显示的内容，比如：
data: [
{ value: '1200', toolText: '2019年销售额：1200万元' },
{ value: '1500', toolText: '2020年销售额：1500万元' }
]总结
使用FusionCharts实现2D柱状图和折线图的组合图，核心是通过mscombi2d图表类型，配置多个不同type的数据集，再根据数据量级决定是否使用双y轴。掌握基础的配置项后，你可以根据业务需求调整颜色、样式、提示信息等，让组合图更贴合实际展示场景。这种组合图在很多数据报表场景中都非常实用，能同时展示不同维度的数据，提升数据解读的效率。
FusionCharts2D柱状图折线图组合图数据可视化修改时间：2026-05-24 22:17:08