highcharts 在iOS中实现每秒更新的动态图表

k5ifujac  于 2023-01-13  发布在  Highcharts
关注(0)|答案(1)|浏览(277)

我正试图实现在iOS中每秒更新的图表.

import UIKit
import Highcharts
import Firebase
import FirebaseFirestore
import Charts

class LiveTableViewCell: UITableViewCell {

@IBOutlet weak var Aitime: UILabel!
@IBOutlet weak var time: UILabel!
@IBOutlet weak var nowusdt: UILabel!
@IBOutlet weak var nowq8: UILabel!
@IBOutlet weak var inusdt: UILabel!

@IBOutlet weak var live: LineChartView!
@IBOutlet weak var Number: UILabel!
let db = Firestore.firestore()
var number: Int = 0 {
    didSet {
        Number.text = "#"+String(number)
        
    }
}

override func awakeFromNib() {
    super.awakeFromNib()
    // Initialization code
}

override func setSelected(_ selected: Bool, animated: Bool) {
    super.setSelected(selected, animated: animated)
    
    // Configure the view for the selected state
}


func LiveChart(quantity: Double,lastQuatityTimestamp: Int){
    let chartView = HIChartView(frame: live.bounds)

        let options = HIOptions()

        let chart = HIChart()
        chart.type = "spline"
        chart.marginRight = 10

        chart.events = HIEvents()
    
        chart.events.load = HIFunction(jsFunction: "function () { var series = this.series[0]; setInterval(function () { var x = (new Date()).getTime(), y = \(quantity); series.addPoint([x, y], true, true); }, 1000); }")
        options.chart = chart

        let time = HITime()
        time.useUTC = true
        options.time = time

        let title = HITitle()
        title.text = "Live random data"
        options.title = title

        let accessibility = HIAccessibility()
        accessibility.announceNewData = HIAnnounceNewData()
        accessibility.announceNewData.enabled = true
        accessibility.announceNewData.minAnnounceInterval = 15000
        accessibility.announceNewData.announcementFormatter = HIFunction(jsFunction: "function (allSeries, newSeries, newPoint) { if (newPoint) { return 'New point added. Value: ' + newPoint.y; } return false; }")
        options.accessibility = accessibility

        let xAxis = HIXAxis()
        xAxis.type = "datetime"
        xAxis.tickPixelInterval = 150
        options.xAxis = [xAxis]

        let yAxis = HIYAxis()
        yAxis.title = HITitle()
        yAxis.title.text = "Value"
        let plotLines = HIPlotLines()
        plotLines.value = 0
        plotLines.width = 1
        plotLines.color = HIColor(hexValue: "808080")
        yAxis.plotLines = [plotLines]
        options.yAxis = [yAxis]

        let tooltip = HITooltip()
        tooltip.headerFormat = "<b>{series.name}</b><br/>"
        tooltip.pointFormat = "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
        options.tooltip = tooltip

        let legend = HILegend()
        legend.enabled = false
        options.legend = legend

        let exporting = HIExporting()
        exporting.enabled = false
        options.exporting = exporting

        let spline = HISpline()
        spline.name = "Random data"

        spline.data = [

            ["x": Int64((Date().timeIntervalSince1970)),"y": 20],
            ["x": Date().timeIntervalSince1970],
            ["x": Date().timeIntervalSince1970]

        ]
    
        options.series = [spline]

        chartView.options = options

        self.live.addSubview(chartView)

   } 
}

通过这个类从一开始当图表呈现时,它呈现完美,但在那之后的几秒钟,它的线没有呈现完美,再次在几秒钟后,它是工作正常,每秒更新.
我想实现X轴上的图表,它从LiveChart函数中的参数lastQuatityTimestamp开始,之后从当前时间开始,每秒更新一次。
X轴中的图表从1975年开始几秒钟,之后工作正常,但我需要从lastQuatityTimestamp开始,之后从当前时间开始。VideoLink

dfddblmv

dfddblmv1#

首先,它似乎是你的数据有问题-有两个点缺少y

spline.data = [

            ["x": Int64((Date().timeIntervalSince1970)),"y": 20],
            ["x": Date().timeIntervalSince1970],
            ["x": Date().timeIntervalSince1970]

        ]

您需要将Date().timeIntervalSince1970乘以1000,以便与JS中的Date()).getTime()重叠。
然后,将开始日期设置为:

spline.data = [
   ["x": Date().timeIntervalSince1970 * 1000, "y": lastQuatityTimestamp]
]

相关问题