> For the complete documentation index, see [llms.txt](https://cmmobile.gitbook.io/cmiosbook/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cmmobile.gitbook.io/cmiosbook/charts/lesson1-chart-setup.md).

# Lesson1 Chart Setup

範例：<https://github.com/cmmobile/WWChartsDemo>

本篇以LineChart為範例，基本上適用於一般常用Chart圖(Bar, Combine, Scatter)

圖表無資料設定

```swift
chart.noDataFont = UIFont.boldSystemFont(ofSize: 20)
chart.noDataText = "圖表無資料"
chart.noDataTextColor = .white
```

![無資料截圖](/files/-M8xqdkUfItuP1GDGMNb)

接著我們先塞一點資料進去，不過本篇重點不在圖表資料所以先忽略不講

一開始會看到醜醜的圖

![](/files/-M8xv9L9u6-M67P356xn)

接下來要一步步更改外觀

### 1.關閉圖示 (在籌碼K一般不使用內建的legend

```swift
chart.legend.enabled = false
```

![](/files/-M8xxRbZZTfsPWUbCV5o)

### 2.x軸設定

```swift
let xAxis = chart.xAxis
xAxis.labelPosition = .bottom
```

設定labelPosition 在籌碼K   x軸常會來顯示時間 會把它放在下面

![](/files/-M8y3Vy2mmlwjQ0likQn)

```swift
xAxis.labelCount = 6
xAxis.labelTextColor = .white
xAxis.labelFont = UIFont.systemFont(ofSize: 10)
//xAxis.drawLabelsEnabled = true
```

字的風格

![](/files/-M8y3szpWt5Y0lkokQm5)

與label的分隔線

```swift
xAxis.axisLineColor = .yellow
//xAxis.drawAxisLineEnabled = true
//xAxis.axisLineWidth = 0.5

xAxis.drawGridLinesEnabled = false
xAxis.axisMinimum = -0.5
```

![](/files/-M8y5-A14JKRYTlfe4mE)

與xAxis相依的值切線

```
xAxis.gridColor = .red
//xAxis.drawGridLinesEnabled = true
//xAxis.gridLineWidth = 0.5
```

![](/files/-M8y6g7_d-BTos0NqnTB)

畫面顯示的最大最小x設定(自己指定 不交給charts去運算

```
xAxis.axisMinimum = -10
xAxis.axisMinimum = 10
```

![](/files/-M8y8As-PCOoe_LfCItP)

### 3.y軸的設定

依照上面的圖表 我們可以看到 左邊跟右邊都有數字Label

而Charts裡面是可以放入兩種Data去分別依賴左右兩邊的Value

![](/files/-M8yHUOZiDV7wbfslrfx)

接下來的設定就跟X軸一樣，有Label、GridLine、AxisLine

而axisMinimum通常會給Charts自己去算，預設上下會留10%空間。