柱形图(Column Chart)

### 什么是柱形图？
柱形图是不同数据类别的垂直图形表示。它可视化沿两个轴绘制的矩形柱或条中的测量值。一般来说，柱形图和图表通常用于显示数据类别随时间变化的统计比较。

在此柱形图指南中，我们将通过配置和选项来绘制不同类型的柱形图。

### 数据格式
柱形图的数据格式与其他 XY 图表相同。您需要series在图表选项的数组中提供数据。有关如何构建的更多信息，请 series 参见[使用数据](http://www.bixiaguangnian.com/manual/apexcharts/232.html "使用数据")页面。

### 如何制作柱形图？
您可以创建多种类型的柱形图——基本柱形图、堆积柱形图、分布图和反转图。

### 基本柱形图
要创建基本的 JavaScript 柱形图，最重要的属性 `chart.type` 如下所述

```javascript
options = {
  chart: {
    type: 'bar'
  },
  series: [{
    data: [{
      x: 'category A',
      y: 10
    }, {
      x: 'category B',
      y: 18
    }, {
      x: 'category C',
      y: 13
    }]
  }]
}
```

### 添加标记
柱形图上的标记可用于比较，或者有助于提供与特定数据点相关的附加信息。

> 注意：标记不适用于堆叠图表

```javascript
{
  x: 'Category A',
  y: 54,
  goals: [
    {
      name: 'Expected',
      value: 52,
      strokeColor: '#775DD0'
    }
  ]
}
```

### 堆积柱形图
堆叠柱形图有 2 种变体。

#### 普通堆积柱形图
这些列根据它们的值堆叠在彼此之上。

```javascript
chart: {
  stacked: true
}
```

#### 100% 堆积柱形图
这些列根据它们在组中的百分比或权重相互堆叠。

```javascript
chart: {
  stacked: true,
  stackType: "100%"
}
```

### 更改 border-radius
您可以通过设置以下配置来控制柱形图的边框圆角半径。

```javascript
options = {
  plotOptions: {
    bar: {
      borderRadius: 10
    }
  }
}
```

### 更改特定数据点的颜色
通常，我们需要从其余数据中区分或突出显示某个数据点。在这种情况下，我们可以在构建系列时为该数据点注入颜色。下面是一个例子

```javascript
series: [{
  data: [{
    {
      x: 'Category A',
      y: 6653
    }, {
      x: 'Category B',
      y: 8133,
      fillColor: '#EB8C87',
      strokeColor: '#C23829'
    }, {
      x: 'Category C',
      y: 7132
    }
  }]  
}]
```

### 分布式图表
分布式柱形图意味着图表中的所有柱形都将具有不同的颜色。

```javascript
options = {
  plotOptions: {
    bar: {
      distributed: true
    }
  }  
}
```

```javascript
yaxis: {
  reversed: true
}
```

### 反转图表
反向柱形图是一种从上到下而不是从上到下的镜像图表。y 轴的以下配置将生成上下颠倒的图形。

```javascript
yaxis: {
  reversed: true
}
```

### 何时使用柱形图？
柱形图和图形有几种常见的用例。例如，当您想要：

- 比较来自几个相关类别的数据。
- 了解变量如何随时间变化。
- 根据目标线数据评估性能。
- 比较业务数据，例如不同部门和团队的绩效或给定时间段内不同产品类别的销售额。
- 绘制和比较业务统计数据和财务数据。