如何用Kotlin React Frontend渲染ChartJs

我正在试验一个基于Kotlin和React的简单项目,我有一些数据可以用ChartJs来形象化。 但我不确定如何“连接点”。

我在随机生成一些关于一些虚拟“客户”的背景数据。 这是一个连续不断的数据stream (从技术上讲,如果我不停止的话,它会永远持续下去),看起来像这样:

 data:{"name":"John","age": 22,"money":1088.434131568658585820230655372142791748046875} data:{"name":"Patric","age": 32,"money":9803.739582599226196180097758769989013671875} data:{"name":"Sven","age": 13,"money":6654.2184028105320976465009152889251708984375} data:{"name":"Trevor","age": 29,"money":1818.314185601747112741577439010143280029296875} data:{"name":"John","age": 30,"money":427.240483111973617269541136920452117919921875} data:{"name":"Mark","age": 15,"money":3065.9830877835693172528408467769622802734375} data:{"name":"Daniel","age": 18,"money":5860.1371074951812261133454740047454833984375} data:{"name":"Chris","age": 28,"money":7547.2329861790212817140854895114898681640625} 

这是我的模型:

 data class CustomerData(var name: String, var age: Int, var money: Int) 

和我的图表组件:

 interface CustomerChartProps : RProps { var customerDataList: List } interface CustomerChartState : RState { var customerDataList: List } class CustomerChart : RComponent() { override fun CustomerChartState.init(props: CustomerChartProps) { customerDataList = props.customerDataList } override fun RBuilder.render() { canvas() { attrs.id = "myChart" attrs.height = "600" attrs.width = "600" key = "chart" div { props.customerDataList } } var chart = document.getElementById("myChart") } } fun dummyChartData(data: List) = listOf(CustomerData("John", 30, 9999)) fun RBuilder.customerChart(customerDataList: List) = child(CustomerChart::class) { attrs.customerDataList = customerDataList } 

不清楚的是,我如何告诉RState我的数据在不断变化。 我希望能够动态更新图表,同时从虚拟后端获取新data 。 反正我不坚持数据。

你有什么建议或建议? 我似乎无法find一个合适的示例/教程/文档。

我知道我的问题非常模糊,但我希望至少我是正确的方向,或者有人可以指出如何到达那里。