Charts: ๋‹ค์ค‘/๊ทธ๋ฃนํ™”๋œ ๋ง‰๋Œ€ ์ฐจํŠธ์˜ XAxis ๋ ˆ์ด๋ธ” ๋ฌธ์ œ

์— ๋งŒ๋“  2017๋…„ 05์›” 26์ผ  ยท  9์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: danielgindi/Charts

์—ฌ๋Ÿฌ/๊ทธ๋ฃนํ™”๋œ ๋ง‰๋Œ€ ์ฐจํŠธ๋ฅผ ๋™์ ์œผ๋กœ ๋งŒ๋“ค๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. ์ œ ๊ฒฝ์šฐ์—๋Š” ์„œ๋ฒ„์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๋ฏ€๋กœ ๋ง‰๋Œ€ ์ˆ˜๊ฐ€ ๊ณ ์ •๋˜์–ด ์žˆ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฃน ๊ณต๊ฐ„์„ ๊ณ„์‚ฐํ•˜๊ธฐ ์œ„ํ•ด ์ด ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

func calcGroupSpace(n:Int)->Double{ let y = 0.03 * Double(n) let x : Double = 1 / (y+1) return x }

๋‚ด xValues๋Š” ์„œ๋ฒ„์—์„œ๋„ ์ œ๊ณต๋˜๋ฉฐ ์—ฌ๊ธฐ์— ๋” ๋‚˜์€ ์ดํ•ด๋ฅผ ์œ„ํ•ด ๋ฐฐ์—ด์„ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

let xVal = ["Apples", "Oranges", "Pears", "Grapes", "Bananas"]

๊ฐ’ ํฌ๋งทํ„ฐ ํด๋ž˜์Šค๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

`ํด๋ž˜์Šค BarChartFormatter: NSObject, IAxisValueFormatter {

var labels: [String] = []

func stringForValue(_ value: Double, axis: AxisBase?) -> String {
    let index = Int(value) % labels.count
    if index>=0 && index<labels.count{
        return labels[index]
    }
    return ""
}

init(labels: [String]) {
    super.init()
    self.labels = labels
}

}
`

๋‚ด ์ฐจํŠธ ๋‚ด๋ถ€์—๋Š” x์ถ• ๋ฐ ๊ทธ๋ฃน ๊ณต๊ฐ„์— ๋Œ€ํ•œ ์ฝ”๋“œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.
` let chartFormatter = BarChartFormatter(๋ ˆ์ด๋ธ”: xAxis)

    let xaxis = barChart.xAxis
    //xaxis.valueFormatter = axisFormatDelegate
    xaxis.drawGridLinesEnabled = true
    xaxis.labelPosition = .bottom
    xaxis.centerAxisLabelsEnabled = true
    xaxis.valueFormatter = chartFormatter
    xaxis.granularityEnabled = true
    xaxis.granularity = 1
    xaxis.labelCount = xAxis.count

    let groupSpace = chartCommanStyle.calcGroupSpace(n: keys.count)
    let barSpace = 0.03
    let barWidth = groupSpace


    let groupCount = xAxis.count+1
    let startYear = 0


    data.barWidth = barWidth;
    barChart.xAxis.axisMinimum = Double(startYear)
    let gg = data.groupWidth(groupSpace: groupSpace, barSpace: barSpace)

    barChart.xAxis.axisMaximum = Double(startYear) + gg * Double(groupCount)

    data.groupBars(fromX: Double(startYear), groupSpace: groupSpace, barSpace: barSpace)

    barChart.data = data

    barChart.setVisibleXRangeMaximum(15)
    barChart.animate(yAxisDuration: 1.0, easingOption: .easeInOutBounce)`

๋ฌธ์ œ๋Š” ๋‚ด x์ถ• ๋ ˆ์ด๋ธ”์ด ์ž˜๋ชป๋œ ์ˆœ์„œ๋กœ ํ‘œ์‹œ๋œ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ฃผ์–ด์ง„๋Œ€๋กœํ•ด์•ผํ•˜์ง€๋งŒ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ธ์‡„ํ•ฉ๋‹ˆ๋‹ค.

screen shot 2017-05-26 at 5 53 42 pm

์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋„๋ก ๋„์™€์ฃผ์„ธ์š”.

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

@atalayasa & @mazenhalawi : ์•ˆ๋…•ํ•˜์„ธ์š”, ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ–ˆ์Šต๋‹ˆ๋‹ค. https://github.com/sagarsucode/Charts ๋งํฌ๋ฅผ ํ™•์ธ

๋ชจ๋“  9 ๋Œ“๊ธ€

๊ทธ๋ฃน ๊ณต๊ฐ„ ์นด์šดํŠธ ๊ธฐ๋Šฅ์„ ๋ณ€๊ฒฝํ•˜์—ฌ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด์ „์— ๋‚˜๋Š” ๊ทธ๊ฒƒ์„ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๊ณ„์‚ฐํ•˜๊ณ  ์žˆ์—ˆ๋‹ค.

(groupSpace * barSpace) * n + groupSpace = 1

ํ•˜์ง€๋งŒ ์ด๊ฒƒ์€ ์ž˜๋ชป๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

(๋ง‰๋Œ€ ๋„ˆ๋น„ * barSpace) * n + groupSpace = 1

๊ทธ๋ž˜์„œ n๊ฐœ์˜ ์—ด์— ๋Œ€ํ•œ ๋‚˜์˜ ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ์€

func calcGroupSpace(n:Int)->Double{ let groupSpace = 1 - (0.23 * Double(n)) return groupSpace }

์ด๊ฒƒ์ด ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค์—๊ฒŒ ๋„์›€์ด๋˜๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค.

๋‚ด ์งˆ๋ฌธ์€ ์œ„์˜ ์งˆ๋ฌธ๊ณผ ๊ด€๋ จ์ด ์žˆ์Šต๋‹ˆ๋‹ค.
(์œ„์˜ ๋‹ต๋ณ€์€ ๋‚˜์—๊ฒŒ ๋„์›€์ด๋˜์ง€ ์•Š์•„ ๋‚ด ๋ฌธ์ œ๋ฅผ ๊ฒŒ์‹œํ•˜๋Š” ์ด์œ ์ž…๋‹ˆ๋‹ค.)
๋‚ด ์ฝ”๋“œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

let months = ["Jan", "Feb", "Mar", "Apr", "May"]
let unitsSold = [20.0, 4.0, 6.0, 3.0, 12.0]
let unitsBought = [10.0, 14.0, 60.0, 13.0, 2.0]

//legend
        let legend = barChartView.legend
        legend.enabled = true
        legend.horizontalAlignment = .right
        legend.verticalAlignment = .top
        legend.orientation = .vertical
        legend.drawInside = true
        legend.yOffset = 10.0;
        legend.xOffset = 10.0;
        legend.yEntrySpace = 0.0;


        let yaxis = barChartView.leftAxis
        yaxis.spaceTop = 0.35
        yaxis.axisMinimum = 0
        yaxis.drawGridLinesEnabled = false

        barChartView.rightAxis.enabled = true


        barChartView.delegate = self
        barChartView.noDataText = "You need to provide data for the chart."
        barChartView.chartDescription?.textColor = UIColor.clear

        let xaxis = barChartView.xAxis
        //xaxis.valueFormatter = axisFormatDelegate
        xaxis.forceLabelsEnabled = true
        xaxis.drawGridLinesEnabled = false
        xaxis.labelPosition = .bottom
        xaxis.centerAxisLabelsEnabled = true
        xaxis.valueFormatter = IndexAxisValueFormatter(values:self.months)
        xaxis.granularityEnabled = true
        xaxis.granularity = 1


var dataEntries: [BarChartDataEntry] = []
        var dataEntries1: [BarChartDataEntry] = []

        for i in 0..<self.months.count {

            let dataEntry = BarChartDataEntry(x: Double(i) , y: Double(self.unitsSold[i]))
            dataEntries.append(dataEntry)

            let dataEntry1 = BarChartDataEntry(x: Double(i) , y: Double(self.unitsBought[i]))
            dataEntries1.append(dataEntry1)

        }

        let chartDataSet = BarChartDataSet(values: dataEntries, label: "unitsSold")
        let chartDataSet1 = BarChartDataSet(values: dataEntries1, label: "unitsBought")

        let dataSets: [BarChartDataSet] = [chartDataSet,chartDataSet1]
        chartDataSet.colors = [UIColor(red: 0/255, green: 255/255, blue: 0/255, alpha: 0.5)]
        chartDataSet1.colors = [UIColor(red: 255/255, green: 0/255, blue: 0/255, alpha: 0.8)]

        //chartDataSet.colors = ChartColorTemplates.colorful()
        //let chartData = BarChartData(dataSet: chartDataSet)

        let chartData = BarChartData(dataSets: dataSets)

        let groupSpace = 0.5
        let barSpace = 0.03
        let barWidth = groupSpace


        let groupCount = self.months.count
        let startYear = 0


        chartData.barWidth = barWidth;
        barChartView.xAxis.axisMinimum = Double(startYear)
        let gg = chartData.groupWidth(groupSpace: groupSpace, barSpace: barSpace)

        barChartView.xAxis.axisMaximum = Double(startYear) + gg * Double(groupCount)

        chartData.groupBars(fromX: Double(startYear), groupSpace: groupSpace, barSpace: barSpace)

        barChartView.data = chartData

        barChartView.setVisibleXRangeMaximum(15)
        barChartView.animate(yAxisDuration: 1.0, easingOption: .easeInOutBounce)

์ด ์Šคํฌ๋ฆฐ์ƒท์„ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค:

screen shot 2018-03-17 at 3 10 09 pm

๋ฌธ์ œ: ๋ชจ๋“  x์ถ• ๋ ˆ์ด๋ธ”์ด ํ‘œ์‹œ๋˜์ง€ ์•Š๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? ๋‚˜๋Š” Swift 4 ๋ฐ Xcode 9.2๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์—…๋ฐ์ดํŠธ(2018๋…„ 5์›” 8์ผ): ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ–ˆ์Šต๋‹ˆ๋‹ค. https://github.com/sagarsucode/Charts ๋งํฌ๋ฅผ ํ™•์ธ

simulator screen shot - iphone x - 2018-05-08 at 16 32 30

@sagarsucode ๋ฌธ์ œ์— ๋Œ€ํ•œ ํ•ด๊ฒฐ์ฑ…์„ ์ฐพ์•˜์Šต๋‹ˆ๊นŒ?

์œ„์™€ ๊ฐ™์€ ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ๋Š”๋ฐ ๋ฐฐ์—ด์—์„œ ์›”์„ ๋ณต์ œํ•˜์—ฌ ์ˆ˜์ •ํ–ˆ์œผ๋ฏ€๋กœ ๊ท€ํ•˜์˜ ๊ฒฝ์šฐ์—๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.
xAxisLabels = ["2์›”", "2์›”", "3์›”", "3์›”", "4์›”", "4์›”"...]

IndexAxisValueFormatter(values: your_array_here)์—์„œ xAxisLabels ๋ฐฐ์—ด์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
๊ทธ๋Ÿฌ๋‚˜ labelCount ์†์„ฑ์˜ ๊ฒฝ์šฐ ๊ทธ๋ฃน ์ˆ˜๋ฅผ ์–ธ๊ธ‰ํ•ด์•ผ ํ•˜๋ฏ€๋กœ ์œ„์˜ ๊ทธ๋ฆผ์—์„œ 5๋ฅผ ์ž…๋ ฅํ•ฉ๋‹ˆ๋‹ค. xAxisLabels ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ๋งˆ์‹ญ์‹œ์˜ค.

๋„์›€์ด ๋˜๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค!

@atalayasa & @mazenhalawi : ์•ˆ๋…•ํ•˜์„ธ์š”, ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ–ˆ์Šต๋‹ˆ๋‹ค. https://github.com/sagarsucode/Charts ๋งํฌ๋ฅผ ํ™•์ธ

@sagarsucode ๋งŽ์€ sagarsucode ํ™•์ธ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ xaxis ๋ ˆ์ด๋ธ” ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ๋ฐ ์ •๋ง ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค.

์ •๋ง ๊ณ ๋ง™์Šต๋‹ˆ๋‹ค.

@sagarsucode ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

๊ฐ์‚ฌ ํ•ด์š”!!!!

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰