Question

我正在尝试创建一个折线图，在其中我将连续绘制数据，以便可以在实时更新中观察图形，将绘制大约5个点左右的秒数。我正在寻找的图形类似于此处显示的图表

https://www.vanmil.org/live-heart-rate-with-ios-and-meteor/

或

http://www.highcharts.com/demo/dynamic-update

我一直在使用几种不同的图表框架，例如iOS图表，但我似乎无法获得我正在寻找的确切图表，其中可以使用不断发展的X轴绘制实时更新。

使用iOS图表，我设法创建了一种不断发展的图形，下面是示例代码。

 @IBOutlet weak var chartView: LineChartView!
var xAxisArray : [String]?
var yAxisArray : [Double]?
var date : NSDate?
var dateFormatter : NSDateFormatter?

override func viewDidLoad() {
    super.viewDidLoad()

    self.title = "Live Graph"

    let stringArray = NSMutableArray()
    let numberArray = NSMutableArray()

    dateFormatter = NSDateFormatter()
    dateFormatter!.dateFormat = "HH:mm:ss"
    date = NSDate()

    //Insert random values into chart
    for(var i = 0; i < 40; i++)
    {
        date = date!.dateByAddingTimeInterval(0.3)
        let stringDate = dateFormatter?.stringFromDate(date!)
        stringArray.addObject(stringDate!)
        let randomNum = self.randomBetweenNumbers(0.0005, secondNum: 0.0015)
        numberArray.addObject(randomNum)
    }

    xAxisArray = stringArray as NSArray as? [String]
    yAxisArray = numberArray as NSArray as? [Double]

    configureChart()
    setData()

    NSTimer.scheduledTimerWithTimeInterval(0.2, target: self, selector: "updateChart", userInfo: nil, repeats: true)
}

func configureChart()
{
    //Chart config
    chartView.descriptionText = ""
    chartView.noDataTextDescription = "Add Data"
    chartView.drawGridBackgroundEnabled = false
    chartView.dragEnabled = true
    chartView.rightAxis.enabled = false
    chartView.doubleTapToZoomEnabled = false
    chartView.legend.enabled = false

    //Configure xAxis
    let chartXAxis = chartView.xAxis as ChartXAxis
    chartXAxis.labelPosition = .Bottom
    chartXAxis.setLabelsToSkip(5)

    //configure yAxis

    chartView.zoom(1.0, scaleY: 1.0, x: 0.0, y: 0.0)
}

func randomBetweenNumbers(firstNum: CGFloat, secondNum: CGFloat) -> CGFloat{
    return CGFloat(arc4random()) / CGFloat(UINT32_MAX) * abs(firstNum - secondNum) + min(firstNum, secondNum)
}

func updateChart()
{
    let mutableArray = NSMutableArray()
    for(var i = 1; i < xAxisArray?.count; i++)
    {
        mutableArray.addObject(xAxisArray![i])
    }

    date = date!.dateByAddingTimeInterval(1.0)
    let str = dateFormatter!.stringFromDate(date!)
    mutableArray.addObject(str)

    xAxisArray = mutableArray as NSArray as? [String]

    //Numbers
    let numberArray = NSMutableArray()
    for(var i = 1; i < yAxisArray?.count; i++)
    {
        numberArray.addObject(yAxisArray![i])
    }


    let randomNum = self.randomBetweenNumbers(0.0005, secondNum: 0.0015)
    let convertToDouble = Double(randomNum)

    numberArray.addObject(convertToDouble)

    yAxisArray = numberArray as NSArray as? [Double]

    setData()

}

func setData()
{
    // 1 - creating an array of data entries
    var yVals1 : [ChartDataEntry] = [ChartDataEntry]()
    for var i = 0; i < xAxisArray!.count; i++ {
        yVals1.append(ChartDataEntry(value: yAxisArray![i], xIndex: i))
    }

    // 2 - create a data set with our array
    let set1: LineChartDataSet = LineChartDataSet(yVals: yVals1, label: "")

    set1.axisDependency = .Left // Line will correlate with left axis values
    set1.setColor(UIColor.blueColor().colorWithAlphaComponent(0.5)) // our line's opacity is 50%
    set1.setCircleColor(UIColor.blueColor()) // our circle will be dark red
    set1.lineWidth = 2.0
    set1.circleRadius = 6.0 // the radius of the node circle
    set1.fillAlpha = 65 / 255.0
    set1.fillColor = UIColor.blueColor()
    set1.highlightColor = UIColor.whiteColor()
    set1.drawCircleHoleEnabled = true
    set1.drawFilledEnabled = true

    //3 - create an array to store our LineChartDataSets
    var dataSets : [LineChartDataSet] = [LineChartDataSet]()
    dataSets.append(set1)

    //4 - pass our months in for our x-axis label value along with our dataSets
    let data: LineChartData = LineChartData(xVals: xAxisArray, dataSets: dataSets)

    //5 - finally set our data
    self.chartView.data = data

    //Clear text color
    chartView.data?.setValueTextColor(UIColor.clearColor())
}

但是如果你尝试一下，你可以看到它是相当生涩的，加上每个x轴标签更新，我希望X轴继续发展，只是让它在屏幕上动画，因为绘图继续像示例中显示了一个。

是否有人知道任何允许我复制此类图表的图表软件，或者是否可以使用iOS图表实现此效果？

提前致谢

亚当

编辑：

我正在尝试实现这种类型的绘图示例

http://www.code4app.net/ios/Dynamic-plot-curve-line-like-stock-chart/52d68b75cb7e84802f8b5340

希望更顺畅，

Answer 1

现在可以使用iOS图表完成：

override func viewDidLoad() {
    super.viewDidLoad()

    //charts
    self.lineChartView.delegate = self
    let set_a: LineChartDataSet = LineChartDataSet(yVals: [ChartDataEntry](), label: "a")
    set_a.drawCirclesEnabled = false
    set_a.setColor(UIColor.blueColor())

    let set_b: LineChartDataSet = LineChartDataSet(yVals: [ChartDataEntry](), label: "b")
    set_b.drawCirclesEnabled = false
    set_b.setColor(UIColor.greenColor())

    self.lineChartView.data = LineChartData(xVals: [String](), dataSets: [set_a, set_b])

    timer = NSTimer.scheduledTimerWithTimeInterval(0.010, target:self, selector: #selector(ViewController.updateCounter), userInfo: nil, repeats: true)
}


// add point
var i = 0
func updateCounter() {
    self.lineChartView.data?.addEntry(ChartDataEntry(value: reading_a[i], xIndex: i), dataSetIndex: 0)
    self.lineChartView.data?.addEntry(ChartDataEntry(value: reading_b[i], xIndex: i), dataSetIndex: 1)
    self.lineChartView.data?.addXValue(String(i))
    self.lineChartView.setVisibleXRange(minXRange: CGFloat(1), maxXRange: CGFloat(50))  
    self.lineChartView.notifyDataSetChanged()
    self.lineChartView.moveViewToX(CGFloat(i))  
    i = i + 1
}

Answer 2

我刚做了a small that does exactly what you need。它每秒插入4个点，自动滚动图表到新数据。（滚动顺畅，新数据正在重新绘制，严重的我不知道为什么你不想给这个方法一个机会）你可以回滚图表以查看之前的所有点。图表单元格/切片正在重复使用，因此您可以将其用于无限图表，例如显示心跳图表几个小时。

请看一下，让我知道你的想法。

Answer 3

我已将Chris Code更新为Charts 3.0

char* number; // here the source number is put

strcopy(ending, &number[strlen(number) - x]);
long CheckedNumber = atoi(ending);

long NewCheckedNumber;
int i=0;
while (i<x){
  NewCheckedNumber = CheckedNumber / 5;
  if ( NewCheckedNumber * 5 != CheckedNumber ) return 0;
  CheckedNumber = NewCheckedNumber;
  i++;
}
return 1;

Answer 4

如果您无法为此找到合适的第三方，我建议您使用以下方法：

使用逆时针旋转90˚的tableview。
实现包含要绘制的代码的自定义UIView（图表/图表顶点），然后添加到单元格的根视图中。
每秒将5个单元格动态插入到tableview的数据源中。

我知道实现此引擎需要耗时，但这将100％正常工作。我打算为此创建一个开源项目。但遗憾的是，我还没有任何好的代码可供分享。

XCode动态实时更新折线图

4 个答案: