📂
CMiOSBook
  • CMoney iOS Book
  • Coding 101
    • Value / Reference Type
    • ARC + Retain Cycle
    • 物件之間的溝通方式
  • 工具主題
    • 基本工具篇
    • Git 篇
  • 架構主題
    • MVC
  • CodingStyle主題
    • CodingStyle 規則
      • 專案(Project)
      • 命名(Naming)
      • 程式格式(Format)
      • 註解(Comment)
      • 類別與結構(Classes and Structures)
      • 修飾詞(Modifier)
      • 閉包表達式(Closures)
    • 靜態檢查器
    • 專案基本規定
  • UI主題
    • UIScrollViewDelegate & UITableViewDelegate
  • Charts主題
    • 簡介
    • Lesson1 Chart Setup
    • Lesson2 Chart Data
    • Lesson3 CombinedChartView
    • Lesson4 Renderer
  • Test主題
    • 單元測試的基本概念
    • XCTest-UnitTest
    • XCTest-UITest
  • 學習資源
    • 相關網站
    • 相關會議與社群
    • 計算機考題
Powered by GitBook
On this page
  • 1.關閉圖示 (在籌碼K一般不使用內建的legend
  • 2.x軸設定
  • 3.y軸的設定

Was this helpful?

  1. Charts主題

Lesson1 Chart Setup

圖表的基礎設定

Previous簡介NextLesson2 Chart Data

Last updated 4 years ago

Was this helpful?

範例:

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

圖表無資料設定

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

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

一開始會看到醜醜的圖

接下來要一步步更改外觀

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

chart.legend.enabled = false

2.x軸設定

let xAxis = chart.xAxis
xAxis.labelPosition = .bottom

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

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

字的風格

與label的分隔線

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

xAxis.drawGridLinesEnabled = false
xAxis.axisMinimum = -0.5

與xAxis相依的值切線

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

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

xAxis.axisMinimum = -10
xAxis.axisMinimum = 10

3.y軸的設定

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

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

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

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

https://github.com/cmmobile/WWChartsDemo
無資料截圖