同步图表(Synchronized charts)

当您有多个具有共同 x 轴且 y 值存在显着差异的图表时，这是通过同步图表对其进行可视化的一种普遍方式。

在此同步图表指南中，我们将完成创建此类图表所需的设置。

## 设置全局选项
共享相同样式的多个图表可以使用全局Apex变量来设置应用于页面上所有图表的公共选项。

```javascript
window.Apex = {
  chart: {
    height: 160,
  },
  dataLabels: {
    enabled: false
  }
}
```

这会将所有图表的高度设置为 160 像素并关闭数据标签。

## 设置单独的图表
每个单独的图表都有它自己的元素。

```html
<div id="synced-charts">
  <div id="chart-line"></div>
  <div id="chart-area"></div>
</div>
```

### 为每个图表设置选项。
有一些属性是正确构建同步图表所必需的。

- `chart.id` 应该是唯一标识符。
- `chart.group` 对于需要同步的图表应该是相同的。
- `yaxis.labels.minWidth` 所有图表也应该相同。悬停或交互时，不同图表中的不同宽度yaxis会产生不正确的结果。

```javascript
var optionsLine = {
  series: [{
    data: [...]
  }],
  colors: ['#00E396'],
  chart: {
    id: 'line-1',
    group: 'social',
    type: 'line',
  },
  yaxis: {
    labels: {
      minWidth: 40
    }
  }
};
var chart = new ApexCharts(el, optionsLine)
chart.render()

var optionsArea = {
  series: [{
    data: [...]
  }],
  colors: ['#008FFB'],
  chart: {
    id: 'area-1',
    group: 'social',
    type: 'area',
  },
  yaxis: {
    labels: {
      minWidth: 40
    }
  }
};
```
var chart = new ApexCharts(el, optionsArea)
chart.render()

就是这样！完成后，您将看到两个图表（一条线和一个区域），当您将鼠标悬停在它们上方或放大/缩小其中一个图表时，您将看见另一个图表。