feat(new-version): add new readme
This commit is contained in:
“Andras
@@ -1,192 +1,180 @@
|
||||
# SwiftUICharts
|
||||
|
||||
Swift package for displaying charts effortlessly.
|
||||
### SwiftUICharts is here with a new version, giving more controll and customization over the charts and full ios 13 backwards compatibility.
|
||||
|
||||
|
||||
SwiftUICharts is an open source library for creating charts in iOS apps with SwiftUI. Built natively with SwiftUI in mind and it is fully compatible with the latest versions of iOS, also backwards **compatible up to iOS 13.**
|
||||
|
||||
It supports:
|
||||
* Line charts
|
||||
* Bar charts
|
||||
* Pie charts
|
||||
With SwiftUICharts, you can easily create a variety of chart types, including line charts, bar charts, ring charts and pie charts. It also provides additional chart types and customization options, giving you the flexibility to create charts that perfectly fit your needs.
|
||||
|
||||
### Installation:
|
||||
In addition to its native SwiftUI integration, backwards compatibility and wide range of chart types, SwiftUICharts is also easy to use, making it a great choice for creating stunning and intuitive charts in your applications.
|
||||
|
||||
It requires iOS 13 and Xcode 11!
|
||||
<p align="center">
|
||||
<img src="Resources/linevid2.gif" width="30%"/> <img src="Resources/barvid2.gif" width="30%"/> <img src="Resources/pievid2.gif" width="30%"/>
|
||||
</p>
|
||||
|
||||
In Xcode got to `File -> Swift Packages -> Add Package Dependency` and paste inthe repo's url: `https://github.com/AppPear/ChartView`
|
||||
### Composable
|
||||
|
||||
### Usage:
|
||||
You can now build your custom chart from prebuilt layers. Use a simple chart, add background grids, add chart labels to the axes, add tcks to the line, etc.
|
||||
|
||||
import the package in the file you would like to use it: `import SwiftUICharts`
|
||||
### Works great with native SwiftUI elements
|
||||
|
||||
You can display a Chart by adding a chart view to your parent view:
|
||||
[Example codes here](./example.md)
|
||||
<p align="left">
|
||||
<img src="Resources/linechartcard.png" width="40%"/> <img src="Resources/barchartcard.png" width="40%"/>
|
||||
<img src="Resources/piechartcard.png" width="40%"/>
|
||||
</p>
|
||||
|
||||
### Demo
|
||||
### Installation
|
||||
|
||||
Added an example project, with **iOS, watchOS** target: https://github.com/AppPear/ChartViewDemo
|
||||
It is a SPM package, in Xcode go to File -> Swift Packages -> Add Package Dependency and paste in the repo's url: https://github.com/AppPear/ChartView
|
||||
|
||||
## Line charts
|
||||
if you want to add previous releases you can find release tags https://github.com/AppPear/ChartView/releases
|
||||
|
||||
**LineChartView with multiple lines!**
|
||||
First release of this feature, interaction is disabled for now, I'll figure it out how could be the best to interact with multiple lines with a single touch.
|
||||
|
||||
### Slack
|
||||
|
||||
Usage:
|
||||
```swift
|
||||
MultiLineChartView(data: [([8,32,11,23,40,28], GradientColors.green), ([90,99,78,111,70,60,77], GradientColors.purple), ([34,56,72,38,43,100,50], GradientColors.orngPink)], title: "Title")
|
||||
```
|
||||
Gradient colors are now under the `GradientColor` struct you can create your own gradient by `GradientColor(start: Color, end: Color)`
|
||||
Join our Slack channel for day to day conversation and more insights:
|
||||
|
||||
Available preset gradients:
|
||||
* orange
|
||||
* blue
|
||||
* green
|
||||
* blu
|
||||
* bluPurpl
|
||||
* purple
|
||||
* prplPink
|
||||
* prplNeon
|
||||
* orngPink
|
||||
https://join.slack.com/t/swiftuichartview/shared_invite/zt-g6mxioq8-j3iUTF1YKX7D23ML3qcc4g
|
||||
|
||||
**Full screen view called LineView!!!**
|
||||
## Quick start guide:
|
||||
|
||||
|
||||
**Create a simple chart:**
|
||||
|
||||
<p align="left">
|
||||
<img src="Resources/chartpic1.png" width="350px"/>
|
||||
</p>
|
||||
|
||||
```swift
|
||||
LineView(data: [8,23,54,32,12,37,7,23,43], title: "Line chart", legend: "Full screen") // legend is optional, use optional .padding()
|
||||
LineChart()
|
||||
.data([3, 5, 4, 1, 0, 2, 4, 1, 0, 2, 8])
|
||||
.chartStyle(ChartStyle(backgroundColor: .white, foregroundColor: ColorGradient(.orange, .red)))
|
||||
```
|
||||
|
||||
Adopts to dark mode automatically
|
||||
**Add a background grid to the chart:**
|
||||
|
||||
|
||||
|
||||
You can add your custom darkmode style by specifying:
|
||||
<p align="left">
|
||||
<img src="Resources/chartpic2.png" width="350px"/>
|
||||
</p>
|
||||
|
||||
```swift
|
||||
let myCustomStyle = ChartStyle(...)
|
||||
let myCutsomDarkModeStyle = ChartStyle(...)
|
||||
myCustomStyle.darkModeStyle = myCutsomDarkModeStyle
|
||||
ChartGrid {
|
||||
LineChart()
|
||||
.data([3, 5, 4, 1, 0, 2, 4, 1, 0, 2, 8])
|
||||
.chartStyle(ChartStyle(backgroundColor: .white, foregroundColor: ColorGradient(.orange, .red)))
|
||||
}
|
||||
.setNumberOfHorizontalLines(5)
|
||||
.setNumberOfVerticalLines(4)
|
||||
```
|
||||
|
||||
**Line chart is interactive, so you can drag across to reveal the data points**
|
||||
**Add a axis label to the chart:**
|
||||
|
||||
You can add a line chart with the following code:
|
||||
<p align="left">
|
||||
<img src="Resources/chartpic3.png" width="350px"/>
|
||||
</p>
|
||||
|
||||
```swift
|
||||
LineChartView(data: [8,23,54,32,12,37,7,23,43], title: "Title", legend: "Legendary") // legend is optional
|
||||
AxisLabels {
|
||||
ChartGrid {
|
||||
LineChart()
|
||||
.data([3, 5, 4, 1, 0, 2, 4, 1, 0, 2, 8])
|
||||
.chartStyle(ChartStyle(backgroundColor: .white, foregroundColor: ColorGradient(.orange, .red)))
|
||||
}
|
||||
.setNumberOfHorizontalLines(5)
|
||||
.setNumberOfVerticalLines(4)
|
||||
}
|
||||
.setAxisXLabels([(1, "Nov"), (2, "Dec"), (3, "Jan")], range: 1...3)
|
||||
```
|
||||
|
||||
**Turn drop shadow off by adding to the Initialiser: `dropShadow: false`**
|
||||
**Show chart marks on the line:**
|
||||
|
||||
|
||||
## Bar charts
|
||||
|
||||
|
||||
**[New feature] you can display labels also along values and points for each bar to descirbe your data better!**
|
||||
**Bar chart is interactive, so you can drag across to reveal the data points**
|
||||
|
||||
You can add a bar chart with the following code:
|
||||
|
||||
Labels and points:
|
||||
<p align="left">
|
||||
<img src="Resources/chartpic4.png" width="350px"/>
|
||||
</p>
|
||||
|
||||
```swift
|
||||
BarChartView(data: ChartData(values: [("2018 Q4",63150), ("2019 Q1",50900), ("2019 Q2",77550), ("2019 Q3",79600), ("2019 Q4",92550)]), title: "Sales", legend: "Quarterly") // legend is optional
|
||||
AxisLabels {
|
||||
ChartGrid {
|
||||
LineChart()
|
||||
.showChartMarks(true)
|
||||
.data([3, 5, 4, 1, 0, 2, 4, 1, 0, 2, 8])
|
||||
.chartStyle(ChartStyle(backgroundColor: .white, foregroundColor: ColorGradient(.orange, .red)))
|
||||
}
|
||||
.setNumberOfHorizontalLines(5)
|
||||
.setNumberOfVerticalLines(4)
|
||||
}
|
||||
.setAxisXLabels([(1, "Nov"), (2, "Dec"), (3, "Jan")], range: 1...3)
|
||||
```
|
||||
Only points:
|
||||
|
||||
**Apply custom ranges on chart**
|
||||
|
||||
<p align="left">
|
||||
<img src="Resources/chartpic5.png" width="350px"/>
|
||||
</p>
|
||||
|
||||
```swift
|
||||
BarChartView(data: ChartData(points: [8,23,54,32,12,37,7,23,43]), title: "Title", legend: "Legendary") // legend is optional
|
||||
AxisLabels {
|
||||
ChartGrid {
|
||||
LineChart()
|
||||
.showChartMarks(true)
|
||||
.data([3, 5, 4, 1, 0, 2, 4, 1, 0, 2, 8])
|
||||
.rangeY(0...10)
|
||||
.rangeX(0...5)
|
||||
.chartStyle(ChartStyle(backgroundColor: .white, foregroundColor: ColorGradient(.orange, .red)))
|
||||
}
|
||||
.setNumberOfHorizontalLines(5)
|
||||
.setNumberOfVerticalLines(4)
|
||||
}
|
||||
.setAxisXLabels([(1, "Nov"), (2, "Dec"), (3, "Jan")], range: 1...3)
|
||||
```
|
||||
|
||||
**ChartData** structure
|
||||
Stores values in data pairs (actually tuple): `(String,Double)`
|
||||
* you can have duplicate values
|
||||
* keeps the data order
|
||||
**Add multiple charts in the same frame**
|
||||
|
||||
You can initialise ChartData multiple ways:
|
||||
* For integer values: `ChartData(points: [8,23,54,32,12,37,7,23,43])`
|
||||
* For floating point values: `ChartData(points: [2.34,3.14,4.56])`
|
||||
* For label,value pairs: `ChartData(values: [("2018 Q4",63150), ("2019 Q1",50900)])`
|
||||
|
||||
|
||||
You can add different formats:
|
||||
* Small `ChartForm.small`
|
||||
* Medium `ChartForm.medium`
|
||||
* Large `ChartForm.large`
|
||||
<p align="left">
|
||||
<img src="Resources/chartpic6.png" width="350px"/>
|
||||
</p>
|
||||
|
||||
```swift
|
||||
BarChartView(data: ChartData(points: [8,23,54,32,12,37,7,23,43]), title: "Title", form: ChartForm.small)
|
||||
AxisLabels {
|
||||
ChartGrid {
|
||||
LineChart()
|
||||
.showChartMarks(true)
|
||||
.data([3, 5, 4, 1, 0, 2, 4, 1, 0, 2, 8])
|
||||
.rangeY(0...12)
|
||||
.rangeX(0...5)
|
||||
.chartStyle(ChartStyle(backgroundColor: .white, foregroundColor: ColorGradient(.orange, .red)))
|
||||
LineChart()
|
||||
.showChartMarks(true)
|
||||
.data([4, 1, 0, 2, 8, 3, 6, 1, 4])
|
||||
.rangeY(0...12)
|
||||
.rangeX(0...5)
|
||||
.chartStyle(ChartStyle(backgroundColor: .white, foregroundColor: ColorGradient(.blue, .purple)))
|
||||
}
|
||||
.setNumberOfHorizontalLines(5)
|
||||
.setNumberOfVerticalLines(4)
|
||||
}
|
||||
.setAxisXLabels([(1, "Nov"), (2, "Dec"), (3, "Jan")], range: 1...3)
|
||||
```
|
||||
|
||||
For floating point numbers, you can set a custom specifier:
|
||||
**Combine chart types in the same frame**
|
||||
|
||||
<p align="left">
|
||||
<img src="Resources/chartpic7.png" width="350px"/>
|
||||
</p>
|
||||
|
||||
```swift
|
||||
BarChartView(data: ChartData(points:[1.23,2.43,3.37]) ,title: "A", valueSpecifier: "%.2f")
|
||||
```
|
||||
For integers you can disable by passing: `valueSpecifier: "%.0f"`
|
||||
|
||||
|
||||
You can set your custom image in the upper right corner by passing in the initialiser: `cornerImage:Image(systemName: "waveform.path.ecg")`
|
||||
|
||||
|
||||
**Turn drop shadow off by adding to the Initialiser: `dropShadow: false`**
|
||||
|
||||
### You can customize styling of the chart with a ChartStyle object:
|
||||
|
||||
Customizable:
|
||||
* background color
|
||||
* accent color
|
||||
* second gradient color
|
||||
* text color
|
||||
* legend text color
|
||||
|
||||
```swift
|
||||
let chartStyle = ChartStyle(backgroundColor: Color.black, accentColor: Colors.OrangeStart, secondGradientColor: Colors.OrangeEnd, chartFormSize: ChartForm.medium, textColor: Color.white, legendTextColor: Color.white )
|
||||
...
|
||||
BarChartView(data: [8,23,54,32,12,37,7,23,43], title: "Title", style: chartStyle)
|
||||
AxisLabels {
|
||||
ChartGrid {
|
||||
BarChart()
|
||||
.data([2, 4, 1, 3])
|
||||
.chartStyle(ChartStyle(backgroundColor: .white, foregroundColor: ColorGradient(.orange, .red)))
|
||||
LineChart()
|
||||
.showChartMarks(true)
|
||||
.data([2, 4, 1, 3])
|
||||
.chartStyle(ChartStyle(backgroundColor: .white, foregroundColor: ColorGradient(.blue, .purple)))
|
||||
}
|
||||
.setNumberOfHorizontalLines(5)
|
||||
.setNumberOfVerticalLines(4)
|
||||
}
|
||||
.setAxisXLabels([(1, "Nov"), (2, "Dec"), (3, "Jan")], range: 1...3)
|
||||
```
|
||||
|
||||
You can access built-in styles:
|
||||
```swift
|
||||
BarChartView(data: [8,23,54,32,12,37,7,23,43], title: "Title", style: Styles.barChartMidnightGreen)
|
||||
```
|
||||
#### All styles available as a preset:
|
||||
* barChartStyleOrangeLight
|
||||
* barChartStyleOrangeDark
|
||||
* barChartStyleNeonBlueLight
|
||||
* barChartStyleNeonBlueDark
|
||||
* barChartMidnightGreenLight
|
||||
* barChartMidnightGreenDark
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### You can customize the size of the chart with a ChartForm object:
|
||||
|
||||
**ChartForm**
|
||||
* `.small`
|
||||
* `.medium`
|
||||
* `.large`
|
||||
* `.detail`
|
||||
|
||||
```swift
|
||||
BarChartView(data: [8,23,54,32,12,37,7,23,43], title: "Title", form: ChartForm.small)
|
||||
```
|
||||
|
||||
### WatchOS support for Bar charts:
|
||||
|
||||
|
||||
|
||||
## Pie charts
|
||||
|
||||
|
||||
You can add a pie chart with the following code:
|
||||
|
||||
```swift
|
||||
PieChartView(data: [8,23,54,32], title: "Title", legend: "Legendary") // legend is optional
|
||||
```
|
||||
|
||||
**Turn drop shadow off by adding to the Initialiser: `dropShadow: false`**
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 116 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 153 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 514 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 502 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 222 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 105 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 355 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 195 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 147 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 343 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 278 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 73 KiB |
@@ -58,7 +58,7 @@ public struct AxisLabels<Content: View>: View {
|
||||
}
|
||||
|
||||
public var body: some View {
|
||||
VStack(spacing: 0.0) {
|
||||
VStack(spacing: 4.0) {
|
||||
HStack {
|
||||
if axisLabelsStyle.axisLabelsYPosition == .leading {
|
||||
yAxis
|
||||
|
||||
@@ -36,6 +36,7 @@ struct BarChartCell_Previews: PreviewProvider {
|
||||
Group {
|
||||
Group {
|
||||
BarChartCell(value: 0, gradientColor: ColorGradient.greenRed, touchLocation: CGFloat())
|
||||
.padding(50)
|
||||
|
||||
BarChartCell(value: 0.5, gradientColor: ColorGradient.greenRed, touchLocation: CGFloat())
|
||||
BarChartCell(value: 0.75, gradientColor: ColorGradient.whiteBlack, touchLocation: CGFloat())
|
||||
|
||||
@@ -12,6 +12,9 @@ struct BarChartCellShape: Shape, Animatable {
|
||||
func path(in rect: CGRect) -> Path {
|
||||
let adjustedOriginY = rect.height - (rect.height * CGFloat(value))
|
||||
var path = Path()
|
||||
guard value != 0 else {
|
||||
return path
|
||||
}
|
||||
path.move(to: CGPoint(x: 0.0 , y: rect.height))
|
||||
path.addLine(to: CGPoint(x: 0.0, y: adjustedOriginY + cornerRadius))
|
||||
path.addArc(center: CGPoint(x: cornerRadius, y: adjustedOriginY + cornerRadius),
|
||||
@@ -40,6 +43,10 @@ struct BarChartCellShape_Previews: PreviewProvider {
|
||||
|
||||
BarChartCellShape(value: 0.3)
|
||||
.fill(Color.blue)
|
||||
|
||||
BarChartCellShape(value: 0)
|
||||
.fill(Color.blue)
|
||||
.padding(50)
|
||||
|
||||
BarChartCellShape(value: -0.3)
|
||||
.fill(Color.blue)
|
||||
|
||||
@@ -62,7 +62,7 @@ public struct BarChartRow: View {
|
||||
}
|
||||
|
||||
struct BarChartRow_Previews: PreviewProvider {
|
||||
static let chartData = ChartData([6, 2, 5, 8, 6])
|
||||
static let chartData = ChartData([6, 2, 0, 8, 6])
|
||||
static let chartStyle = ChartStyle(backgroundColor: .white, foregroundColor: .orangeBright)
|
||||
static var previews: some View {
|
||||
BarChartRow(chartData: chartData, style: chartStyle)
|
||||
|
||||
@@ -3,7 +3,7 @@ import SwiftUI
|
||||
public class LineChartProperties: ObservableObject {
|
||||
@Published var lineWidth: CGFloat = 2.0
|
||||
@Published var backgroundGradient: ColorGradient?
|
||||
@Published var showChartMarks: Bool = true
|
||||
@Published var showChartMarks: Bool = false
|
||||
@Published var customChartMarksColors: ColorGradient?
|
||||
@Published var lineStyle: LineStyle = .curved
|
||||
@Published var animationEnabled: Bool = true
|
||||
|
||||
+193
@@ -0,0 +1,193 @@
|
||||
# SwiftUICharts
|
||||
|
||||
### Example codes
|
||||
|
||||
<p align="left">
|
||||
<img src="Resources/linechartcard.png" width="400px"/>
|
||||
</p>
|
||||
|
||||
```swift
|
||||
import SwiftUI
|
||||
import SwiftUICharts
|
||||
|
||||
struct DemoView: View {
|
||||
var body: some View {
|
||||
VStack(alignment: .leading) {
|
||||
Text("Sneakers sold")
|
||||
.font(.title)
|
||||
Text("Last week")
|
||||
.font(.subheadline)
|
||||
.foregroundColor(.gray)
|
||||
.padding(.bottom, 8.0)
|
||||
HStack {
|
||||
AxisLabels {
|
||||
ChartGrid {
|
||||
LineChart()
|
||||
.showChartMarks(true)
|
||||
.rangeY(10...40)
|
||||
.data([12, 34, 23, 18, 36, 22, 26])
|
||||
.chartStyle(ChartStyle(backgroundColor: .white,
|
||||
foregroundColor: ColorGradient(.blue, .purple)))
|
||||
}
|
||||
.setNumberOfHorizontalLines(5)
|
||||
.setNumberOfVerticalLines(0)
|
||||
}
|
||||
.setAxisXLabels([(1, "M"), (2, "T"), (3, "W"),(4, "T"), (5, "F"), (6, "S"), (7, "S")],
|
||||
range: 1...7)
|
||||
.setColor(.gray)
|
||||
.setFont(.caption2)
|
||||
|
||||
VStack(alignment: .leading, spacing: 8.0) {
|
||||
Text("Highest revenue:")
|
||||
.font(.callout)
|
||||
Text("Tuesday")
|
||||
.font(.subheadline)
|
||||
.bold()
|
||||
|
||||
Text("Most sales:")
|
||||
.font(.callout)
|
||||
Text("Friday")
|
||||
.font(.subheadline)
|
||||
.bold()
|
||||
Spacer()
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
}
|
||||
}
|
||||
.padding(16.0)
|
||||
.background(RoundedRectangle(cornerRadius: 20)
|
||||
.fill(.white)
|
||||
.shadow(radius: 8.0))
|
||||
.padding(32)
|
||||
.frame(width: 450, height: 350)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
<p align="left">
|
||||
<img src="Resources/barchartcard.png" width="400px"/>
|
||||
</p>
|
||||
|
||||
```swift
|
||||
import SwiftUI
|
||||
import SwiftUICharts
|
||||
|
||||
struct DemoView: View {
|
||||
var body: some View {
|
||||
VStack(alignment: .leading) {
|
||||
Text("Sneaker brands")
|
||||
.font(.title)
|
||||
Text("By popularity")
|
||||
.font(.subheadline)
|
||||
.foregroundColor(.gray)
|
||||
.padding(.bottom, 8.0)
|
||||
HStack {
|
||||
AxisLabels {
|
||||
ChartGrid {
|
||||
BarChart()
|
||||
.data([34, 23, 12])
|
||||
.chartStyle(ChartStyle(backgroundColor: .white,
|
||||
foregroundColor: [ColorGradient(.red, .orange),
|
||||
ColorGradient(.blue, .purple),
|
||||
ColorGradient(.green, .yellow)]))
|
||||
}
|
||||
.setNumberOfHorizontalLines(5)
|
||||
.setNumberOfVerticalLines(0)
|
||||
}
|
||||
.setAxisYLabels([(1, "0"), (2, "100"), (3, "200")],
|
||||
range: 1...3)
|
||||
.setColor(.gray)
|
||||
.setFont(.caption2)
|
||||
|
||||
VStack(alignment: .leading, spacing: 8.0) {
|
||||
HStack {
|
||||
Circle()
|
||||
.fill(ColorGradient(.red, .orange).linearGradient(from: .bottom, to: .top))
|
||||
.frame(width: 24.0, height: 24.0)
|
||||
Text("Sneaker brand 1")
|
||||
}
|
||||
HStack {
|
||||
Circle()
|
||||
.fill(ColorGradient(.blue, .purple).linearGradient(from: .bottom, to: .top))
|
||||
.frame(width: 24.0, height: 24.0)
|
||||
Text("Sneaker brand 2")
|
||||
}
|
||||
HStack {
|
||||
Circle()
|
||||
.fill(ColorGradient(.green, .yellow).linearGradient(from: .bottom, to: .top))
|
||||
.frame(width: 24.0, height: 24.0)
|
||||
Text("Sneaker brand 3")
|
||||
}
|
||||
Spacer()
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
}
|
||||
}
|
||||
.padding(16.0)
|
||||
.background(RoundedRectangle(cornerRadius: 20)
|
||||
.fill(.white)
|
||||
.shadow(radius: 8.0))
|
||||
.padding(32)
|
||||
.frame(width: 450, height: 350)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
<p align="left">
|
||||
<img src="Resources/piechartcard.png" width="400px"/>
|
||||
</p>
|
||||
|
||||
```swift
|
||||
import SwiftUI
|
||||
import SwiftUICharts
|
||||
|
||||
struct DemoView: View {
|
||||
var body: some View {
|
||||
VStack(alignment: .leading) {
|
||||
Text("Sneaker brands")
|
||||
.font(.title)
|
||||
Text("By popularity")
|
||||
.font(.subheadline)
|
||||
.foregroundColor(.gray)
|
||||
.padding(.bottom, 8.0)
|
||||
HStack {
|
||||
PieChart()
|
||||
.data([34, 23, 12])
|
||||
.chartStyle(ChartStyle(backgroundColor: .white,
|
||||
foregroundColor: [ColorGradient(.red, .orange),
|
||||
ColorGradient(.blue, .purple),
|
||||
ColorGradient(.yellow, .green),]))
|
||||
|
||||
VStack(alignment: .leading, spacing: 8.0) {
|
||||
HStack {
|
||||
Circle()
|
||||
.fill(ColorGradient(.red, .orange).linearGradient(from: .bottom, to: .top))
|
||||
.frame(width: 24.0, height: 24.0)
|
||||
Text("Sneaker brand 1")
|
||||
}
|
||||
HStack {
|
||||
Circle()
|
||||
.fill(ColorGradient(.blue, .purple).linearGradient(from: .bottom, to: .top))
|
||||
.frame(width: 24.0, height: 24.0)
|
||||
Text("Sneaker brand 2")
|
||||
}
|
||||
HStack {
|
||||
Circle()
|
||||
.fill(ColorGradient(.green, .yellow).linearGradient(from: .bottom, to: .top))
|
||||
.frame(width: 24.0, height: 24.0)
|
||||
Text("Sneaker brand 3")
|
||||
}
|
||||
Spacer()
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
}
|
||||
}
|
||||
.padding(16.0)
|
||||
.background(RoundedRectangle(cornerRadius: 20)
|
||||
.fill(.white)
|
||||
.shadow(radius: 8.0))
|
||||
.padding(32)
|
||||
.frame(width: 450, height: 350)
|
||||
}
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user