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

柱状图

语法

想要生成柱状图，需要使用下面的语法：

s.addChart(ppt.ChartType.bar, BarData,BarOptions);

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

const BarData = [
    {
        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.bar, BarData, { x: 1, y: 1, w: 8, h: 4 });

配置属性

barDir - 横向柱状图/垂直柱状图

柱状图根据柱条的方向可以分为横向的和垂直的，通过 barDir 属性来控制，它有两个属性值 [col,bar] ，默认值是 col 表示为垂直柱状图。

比如说我们将上面的柱状图改为横向的:

s.addChart(ppt.ChartType.bar, BarData, {
    ...xywh(4, 2, 20, 15),
    barDir: 'bar', // 横向柱状图
});

效果如下：

barGapWidthPct - 柱条间隔宽度

该属性控制柱条之间的宽度，取值0~500，单位是百分比，默认值为150，该值越大，柱条越细（因为柱条的间隔宽度大，柱条被挤得细）。

下图分别是该属性为0和500时的样子

s.addChart(ppt.ChartType.bar, BarData, {
    ...xywh(4, 2, 20, 15),
    barGapWidthPct: 0 // 500
});

barGrouping - 柱状图类型

这个属性有3个值 [clustered,stacked,percentStacked]，控制着柱状图柱子的分布方式，clustered 表示集群分布，就是平时看到的柱状图，一根一根的，stacked 表示堆叠分布，就是我们常说的堆叠柱状图，percentStacked 百分比堆叠柱状图（这个看图更清楚）。

使用堆叠柱状图的一个注意点就是，参数 BarData 必须有两个及以上的元素，因此我们给 BarData 再添加两个元素：

const BarData = [
    {
        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)),
    },
    {
        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)),
    },
    {
        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.bar, BarData, {
    ...xywh(4, 2, 20, 15),
    barGrouping: 'stacked' // 堆叠柱状图
});

然后看看，生成的堆叠柱状图的效果如下：

然后看看百分比堆叠柱状图的效果：

可以看出，堆叠柱状图和百分比堆叠柱状图最大区别就是它们的y轴，一个是数值，一个是百分比。

多个系列的集群柱状图效果如下：

barOverlapPct - 柱条重叠

该属性是个百分比，取值范围在-100到100之间，表示柱条之间的重叠宽度，比如说将该属性设为50，则柱条会有一半的宽度遮挡住其他柱条。 （默认情况下，同一系列的柱条之间是没有间隔的，即该属性的值为0）

s.addChart(ppt.ChartType.bar, BarData, {
    ...xywh(4, 2, 20, 15),
    barOverlapPct:50
});

该属性为正值的时候，会让柱条重叠在一起，该属性为负值的时候则会拉开柱条间的距离。

s.addChart(ppt.ChartType.bar, BarData, {
    ...xywh(4, 2, 20, 15),
    barOverlapPct:-50
});