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

柱状图

语法

想要生成折线图，需要使用下面的语法：

s.addChart(ppt.ChartType.line, LineData,LineOptions);

比如说下面的代码会生成一个最最最基础的折线图：

const lineData = [
    {
        name: "香蕉销量",
        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)),
    }
];

s.addChart(ppt.ChartType.line, lineData, {
    ...xywh(4, 2, 20, 15)
});

效果如下：

配置属性

lineDash - 数据线样式

指的是两数据点之间的线条是怎么样的，该属性的值是一个字符串，可选值有挺多个的：

dash, dashDot, lgDash, lgDashDot, lgDashDotDot, solid, sysDash , sysDot

默认是solid，表示实线连接，dash则表示虚线连接，这两个是比较常用的，样子大家也都应该能想到就不放图片了，下面是其他值的样子：

其实看名字都大概能想到是什么样子了，dash代表线，dot代表点，dashDot就代表点线。

lineDataSymbol - 数据点样式

默认的数据点是一个小圆点，从上面的示例图就可以看到了，可以通过该属性来指定这个数据点的样式，比如说不想要小圆点，而是想不要点，那么就可以把这个属性的值设为 none 即可。 这个属性的可选值如下：

circle,dash,diamond,dot,none,square,triangle

该属性还有3个相关属性，分别控制数据点的尺寸，轮廓尺寸，轮廓颜色，分别对应 lineDataSymbolSize 和 lineDataSymbolLineSize 和 lineDataSymboLineColor。

两个以 Size 结尾的属性，属性值都是数值类型的，取值范围在1~256，lineDataSymbolSize 的默认值是6，而 lineDataSymbolLineSize 的默认值则是0.75，lineDataSymboLineColorz 则接受一个十六进制颜色值作为轮廓的颜色，下面是对这三个属性修改的结果：

s.addChart(ppt.ChartType.line, lineData, {
    ...xywh(4, 2, 20, 15),
    lineDataSymbolSize: 20,
    lineDataSymbolLineSize:10,
    lineDataSymbolLineColor:'000000'
});

进而得到如下这种折线图样式：

lineSize - 数据线尺寸

该属性控制数据点之间线条的粗细，取值单位在0~256，值为0时代表没有线条，值越大，线条越粗。该属性的默认值是2。

s.addChart(ppt.ChartType.line, lineData, {
   ...xywh(4, 2, 20, 15),
   lineSize: 10
});

线条太粗了，把数据点给挡住了（依稀能看到一点）

lineSmooth - 线条柔顺

意思就是让折线变得像曲线，这个属性为布尔值，其效果直接看图是最为明显的：

可以看到，与上面的折线图相比，这个属性为true时，折线图对拐点的处理变得更为顺滑了。