开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第10天，点击查看活动详情

图表是PptxGenJS中的重点部分，主要分为基础图表和复合图表（几种图表组合在一起，比如最常见的柱状图搭配上折线图）。

上图是PptxGenJS官网为我们展示的可以做到的图表Demo，可以看到种类还是蛮多的，有柱状图，堆叠柱状图，三维柱状图，面积图，雷达图，横向柱状图，双向柱状图，饼图，折线图等等。

基础图表的使用

语法

slide.addChart(chartTYpe, chartData, Options);

chartType 图表类型：值取之于 ppt.CHartType
chartData 图表数据：数组类型，一般而言，其中的一个元素代表同种图表的一个图表（有点绕）
Options 图表配置：这里是图表的通用配置，每个图表可以有自己的单独配置

用官网中给出的实例，如果我们想要实现一个【双折线图】，可以如下书写：

let dataChartAreaLine = [  
    {  
        name: "Actual Sales",  
        labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],  
        values: [1500, 4600, 5156, 3167, 8510, 8009, 6006, 7855, 12102, 12789, 10123, 15121],  
    },  
    {  
        name: "Projected Sales",  
        labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],  
        values: [1000, 2600, 3456, 4567, 5010, 6009, 7006, 8855, 9102, 10789, 11123, 12121],  
    },  
];  
  
slide.addChart(pres.ChartType.line, dataChartAreaLine, { x: 1, y: 1, w: 8, h: 4 });

这样就会生成如下图所示的折线图了：

上面的双折线图可以看作是两个折线图叠加而成，因此上面说 chartData 中的每一个元素代表该类图表的一个图表。可以看到 dataChartAreaLine 是一个数组，每一个元素代表一条折线，数组中一共有两个元素，因此代表是双折线图，如果我们再给它加一组数据，就会变成三折线图，如下：

let dataChartAreaLine = [
    {
        name: "Actual Sales",
        labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        values: [1500, 4600, 5156, 3167, 8510, 8009, 6006, 7855, 12102, 12789, 10123, 15121],
    },
    {
        name: "Projected Sales",
        labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        values: [1000, 2600, 3456, 4567, 5010, 6009, 7006, 8855, 9102, 10789, 11123, 12121],
    },
    // 新加一条折线
    {
        name: "new line",
        labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        values: Array(12).fill(1).map(i => Math.floor(Math.random() * 10000 + 100)),
    },
];

下图中的绿色折线就是我们新加的。

说这么多，只是希望大家能理解基础图表语法中的 chartData 是怎么回事。

图表配置项介绍

图表的配置项有7种，分别是

位置/尺寸属性
通用/数据表格/图例/图表标题属性
x轴/y轴属性
柱状图/数据标签/折线图属性
3D柱状图/系列坐标轴属性
元素阴影
复合图表属性

位置/尺寸属性

这个和前面几种元素一样，都是xywh这4个属性

通用/数据表格/图例/图表标题属性

这类属性主要是控制图表中各部分的显隐，比如说以 show 开头的：

showTitle 是否显示图表标题
showValue 是否显示数据（标签）
showPercent 是否显示百分比
showLegend 是否显示图例
showLeaderLines 这个不知道了
showLabel 是否显示标签
showDataTableOutline 是否显示数据表格的轮廓（饼图和点图不适用）
showDataTableVertBorder 是否显示数据表格的竖直边框（饼图和点图不适用）
showDataTableHorzBorder 是否显示数据表格的水平边框（饼图和点图不适用）
showDataTable 是否显示数据表格（就是图表下会有一个表格，不适用饼图和点图）

还有一些控制其他方面的属性，比如

chartColors 图表色盘，这是一个字符串数组，里面存放着各种颜色，图表会依次从中取色（多系列图表）
chartColorsOpacity 图表颜色透明度，取值范围1-100，单位是百分比
dataTableFontSize 数据表格的字体大小
holeSize 点图（洞洞图）那个洞的尺寸，取值范围1-100，单位是百分比
legendFontFace 图例字体
legendFontSize 图例字体大小
legendColor 图例颜色
legendPos 图例位置（b,t,l,r 分别代表下，上，左，右）
radarStyle 雷达图的样式，有3个可选值：standard,amrker,filled

x/y轴

在PptxGenJS中，x轴叫做 Cat Axis 即类目(catalog)轴的意思，表示不是由一系列连续的数据组成的集合（名字而与，你用1~12的数字做x轴也是允许的），y轴叫做 Val Axis 即数值(value)轴，这个是由一系列连续的数据组成的数据集合。

x/y轴可以配置的属性有下面这些：

显隐：AxisHidden（布尔值）
轴标签颜色：AxisLabelColor（字符串）
轴标签是否粗体：AxisLabelFontBold（布尔值）
轴标签字族：AxisLabelFontFace（字符串）
轴标签字体大小：AxisLabelFontSize（数值）
轴标签频率：AxisLabelFrequency（数值,[1-n]）
轴标签位置：AxisLabelPos（字符串，[low,high,nextTo]）
轴标签旋转：AxisLabelRotate（数值，[0-360]）
轴线颜色：AxisLineColor（字符串）
轴线显隐：AxisLineShow（布尔值）
轴线粗细：AxisLineSize（数值）
轴线类型：AxisLineStyle（字符串，[solid,dash,dot]）
轴最大值：AxisMaxVal（数值）
轴最小值：AxisMinVal（数值）
轴标题：AxisTitle（字符串）
轴标题颜色：AxisTitleColor（字符串）
轴标题字族：AxisTitleFontFace（字符串）
轴标题字体大小：AxisTitleFontSize（数值）
轴标题旋转：AxisTitleRotate（数值）
分隔线：GridLine（对象，有size，color，style三个属性）
轴标题显隐：showCatAxisTitle（布尔值）
显示系列名称：showSerName（字符串）

上面Axis开头的属性都省略了前缀，如果是x轴则以 cat 开头，如果是y轴则以 val 开头，比如说x轴显隐的属性是：catAxisHidden。

剩下的柱状图/数据标签/折线图属性以及复合属性，要结合实例来看，放在下一篇。

【PptxGenJS】图表的基本介绍

基础图表的使用

语法

图表配置项介绍

位置/尺寸属性

通用/数据表格/图例/图表标题属性

x/y轴