toolbar

[TOC]
- ## chart
  - ### toolbar
    - #### show: Boolean
	  在右上角显示工具栏/菜单。
    - #### offsetX: Number
      设置工具栏的左偏移量。
    - #### offsetY: Number
      设置工具栏的顶部偏移量。
    - #### tools
      - ##### download: Boolean | String
        在工具栏中显示下载菜单/汉堡包图标。如果要显示自定义图标而不是汉堡图标，可以在此属性中提供 HTML 字符串。
		```javascript
download: true 
/* OR */
download: '<img src="/static/icons/download.png" class="ico-download" width="20">'
```
		ApexCharts 具有内置支持，允许将图表导出为流行的图像格式，如 PNG 或 SVG，还允许将图表数据导出为 CSV 文件。
		
		默认情况下，所有 XY 图表都启用了工具栏，右上角有一个汉堡包图标。
		
        单击 hamburger 图标会打开一个菜单，其中包含以下可供下载的选项
		- 导出为 SVG
		- 导出为 PNG
		- 导出为 CSV 会创建一个逗号分隔值文件，其中包含图表数据。
		
      - ##### selection: Boolean | String
        在工具栏中显示矩形选择图标。如果要显示自定义图标以供选择，可以在此属性中提供 HTML 字符串。
		```javascript
	chart: {
			selection: {
				enabled: true
			}
	}
```
        > 确保在显示选择工具时也启用 [chart.selection](http://www.bixiaguangnian.com/manual/apexcharts/296.html "chart.selection") 。
      - ##### zoom: Boolean | String
        通过在图表区域上拖动选择来显示用于缩放的缩放图标。如果要显示自定义缩放图标，可以在此属性中提供 HTML 字符串。
      - ##### zoomin: Boolean | String
        显示从可见图表区域放大 50% 的放大图标。如果要显示自定义图标以进行放大，可以在此属性中提供 HTML 字符串。
      - ##### zoomout: Boolean | String
        显示从可见图表区域缩小 50% 的缩小图标。如果要显示自定义图标以进行缩小，可以在此属性中提供 HTML 字符串。
      - ##### pan: Boolean | String
        在工具栏中显示平移图标。
      - ##### reset: Boolean | String
        在 zommin/zoomout/panning 之后将图表数据重置为初始状态。如果你想为重置显示一个自定义图标，你可以在这个属性中提供 HTML 字符串。
      - ##### customIcons: Array
        允许在工具栏中添加额外的图标按钮。在下面的示例中，index应该用于放置在工具栏中的特定位置。
		```javascript
	customIcons: [{
			icon: '<img src="/static/icons/chart-carpet.png" width="20">',
			index: 4,
			title: 'tooltip of the icon',
			class: 'custom-icon',
			click: function (chart, options, e) {
				console.log("clicked custom-icon")
			}
	}]
```
    - #### export: {
      - ##### csv: {
        - ###### filename: String
          csv 文件的名称。默认为自动生成的图表 ID
        - ###### columnDelimiter: String
          用于分隔数据项的定界符。默认为逗号。
        - ###### headerCategory: String
          X 值的列标题
        - ###### headerValue: String
          Y 值的列标题
        - ###### dateFormatter: Function
          如果时间戳作为 X 值提供，则可以格式化这些时间戳以将它们转换为日期字符串。
      - ##### svg:
        - ###### filename: String
          SVG 文件的名称。默认为自动生成的图表 ID
      - ##### png:
        - ###### filename: String
          PNG 文件的名称。默认为自动生成的图表 ID
    - #### autoSelected: String
      加载图表时自动选择以下工具之一。

- zoom
      - selection
      - pan

```javascript
  chart: {
      toolbar: {
        show: true,
        offsetX: 0,
        offsetY: 0,
        tools: {
          download: true,
          selection: true,
          zoom: true,
          zoomin: true,
          zoomout: true,
          pan: true,
          reset: true | '<img src="/static/icons/reset.png" width="20">',
          customIcons: []
        },
        export: {
          csv: {
            filename: undefined,
            columnDelimiter: ',',
            headerCategory: 'category',
            headerValue: 'value',
            dateFormatter(timestamp) {
              return new Date(timestamp).toDateString()
            }
          },
          svg: {
            filename: undefined,
          },
          png: {
            filename: undefined,
          }
        },
        autoSelected: 'zoom' 
      },
  }
```