# 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%空間。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://cmmobile.gitbook.io/cmiosbook/charts/lesson1-chart-setup.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.