Question

我正在尝试一个基于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<CustomerData>
}

interface CustomerChartState : RState {
    var customerDataList: List<CustomerData>
}

class CustomerChart : RComponent<CustomerChartProps, CustomerChartState>() {

    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<CustomerData>) =
        listOf(CustomerData("John", 30, 9999))

fun RBuilder.customerChart(customerDataList: List<CustomerData>) = child(CustomerChart::class) {
    attrs.customerDataList = customerDataList
}

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

您有什么建议或建议？我似乎无法找到合适的示例/教程/文档。

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

如何使用Kotlin React前端渲染ChartJs

0 个答案: