一个 SwiftUI 贡献图表(类似 GitHub)实现包

贡献图表

一个贡献图表(又名热图,类似GitHub)库,适用于iOS,macOS和watchOS。

100%用SwiftUI编写。

它支持

Custom Block Number

Of course, you can also custom the size of blocks and spacing between blocks.

Custom Block Color

Here are examples using system colors as below, and you can custom any color you like.

Dark mode

Adjust to dark mode color automatically.

Installation

Require iOS 13, macOS 10.15, watchOS 6 and Xcode 11 or higher. In Xcode go to and paste in the repo’s url:File -> Swift Packages -> Add Package Dependency

https://github.com/VIkill33/SwiftUI-ContributionChart.git

Or you can download the code of this repo, then in Xcode, and open the folder of the repo.Add Local...

Usage

  • Import this package after you installed by import ContributionChart
  • Use the chart like

ContributionChartView(data: yourData,
                      rows: yourRows,
                      columns: yourColumns,
                      targetValue: yourTargetValue,
                      blockColor: .green)

Make sure that yourData (a double array) you pass has exactly numbers, and the targetValue is recommanded to set to the max value of the array.yourRows * yourColumns

The color of a block will appear as exactly the color as parameter when its value is equal to , and appears light gray when is equal to zero.blockColortargetValue

The top-Leading block represents the first value in array, while the bottom-trailing represents the last. And the order follows as below:

Demo Code

import SwiftUI
import ContributionChart

struct ContentView: View {
    var data: [Double]
    let rows = 7
    let columns = 14
    
    init() {
        data = [0.3, 0.4, 0.4, 0.4, 0.1, 0.5, 0.0, 0.1, 0.0, 0.2, 0.2, 0.2, 0.0, 0.2, 0.2, 0.5, 0.4, 0.2, 0.4, 0.5, 0.2, 0.2, 0.4, 0.3, 0.3, 0.2, 0.4, 0.0, 0.0, 0.5, 0.4, 0.3, 0.5, 0.3, 0.0, 0.0, 0.1, 0.0, 0.2, 0.3, 0.0, 0.0, 0.0, 0.5, 0.3, 0.3, 0.0, 0.3, 0.0, 0.5, 0.3, 0.3, 0.4, 0.5, 0.5, 0.3, 0.4, 0.1, 0.4, 0.2, 0.5, 0.1, 0.4, 0.2, 0.5, 0.4, 0.3, 0.5, 0.0, 0.4, 0.3, 0.2, 0.1, 0.5, 0.2, 0.0, 0.2, 0.5, 0.5, 0.3, 0.4, 0.0, 0.3, 0.3, 0.1, 0.2, 0.5, 0.2, 0.1, 0.4, 0.4, 0.0, 0.5, 0.3, 0.3, 0.5, 0.0, 0.2]
    }
    
    var body: some View {
                ContributionChartView(data: data,
                                      rows: rows,
                                      columns: columns,
                                      targetValue: 0.5,
                                      blockColor: .green)
        }
    }


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

GitHub

点击跳转