HighCharts Android中如何为图表数据点传入自定义对象

原有写法无法生效有两个核心原因：

• 自定义GraphPoint未继承Highcharts Android SDK内置的HIPoint数据点基类，SDK默认不会序列化普通数据类的非标准字段，你定义的date属性会被直接丢弃，无法传递到图表渲染层
• 你声明的readings是ArrayList<List<GraphPoint>>二维集合，单条散点序列的data参数要求传入一维点集合，二维结构是给多序列场景使用的，会直接导致数据解析错误。

有两种方式可以给数据点传入自定义属性，两种方式的属性都可以在tooltip中直接访问：

方式1：直接使用内置HIPoint动态添加属性 #

不需要自定义类，直接在创建HIPoint实例后，通过setProperty方法绑定自定义字段即可：

import com.highsoft.highcharts.common.hichartsclasses.HIPoint
import com.highsoft.highcharts.common.hichartsclasses.HIScatter

val readings = ArrayList<HIPoint>()
// 创建点并绑定自定义date字段
readings.add(
    HIPoint(1f, 10f).apply {
        setProperty("date", 1657255313L)
    }
)
readings.add(
    HIPoint(2f, 5f).apply {
        setProperty("date", 1657255351L)
    }
)
readings.add(
    HIPoint(3f, 20f).apply {
        setProperty("date", 1662612113L)
    }
)

val scatter = HIScatter()
scatter.data = readings

方式2：自定义类继承HIPoint #

如果需要统一管理数据结构，可以自定义数据类继承HIPoint，SDK会自动序列化子类中定义的所有公开字段：

import com.highsoft.highcharts.common.hichartsclasses.HIPoint

// 自定义点类继承HIPoint，构造函数传入x、y和自定义字段
data class GraphPoint(
    val x: Float,
    val y: Float,
    val date: Long
) : HIPoint(x, y)

// 构建一维点集合
val readings = ArrayList<GraphPoint>()
readings.add(GraphPoint(1f, 10f, 1657255313L))
readings.add(GraphPoint(2f, 5f, 1657255351L))
readings.add(GraphPoint(3f, 20f, 1662612113L))

val scatter = HIScatter()
scatter.data = readings

配置Tooltip读取自定义属性 #

自定义属性绑定完成后，配置tooltip即可读取date字段做展示：

import com.highsoft.highcharts.common.hichartsclasses.HITooltip
import com.highsoft.highcharts.core.HIFunction
import java.text.SimpleDateFormat
import java.util.Date
import java.util.Locale

val tooltip = HITooltip()
// 简单场景直接用pointFormat占位符读取属性
tooltip.pointFormat = """
    数值: {point.y}<br/>
    时间戳: {point.date}
""".trimIndent()

// 如果需要对字段做格式化处理（比如把时间戳转成日期字符串），用HIFunction实现
tooltip.formatter = HIFunction(
    { context ->
        val dateTimestamp = context.getProperty("date") as Long
        val dateStr = SimpleDateFormat("yyyy-MM-dd HH:mm", Locale.getDefault())
            .format(Date(dateTimestamp))
        """
            x值: ${context.getProperty("x")}<br/>
            y值: ${context.getProperty("y")}<br/>
            时间: $dateStr
        """.trimIndent()
    },
    // 必须在这里声明所有需要访问的字段名，否则上下文拿不到对应值
    arrayOf("x", "y", "date")
)

// 把tooltip配置和序列添加到图表选项中即可
val options = HIOptions()
options.tooltip = tooltip
options.series = arrayListOf(scatter)

• 禁止直接将未继承HIPoint的普通数据类传入series.data，SDK不会解析这类对象的额外字段，会导致自定义属性丢失
• 使用HIFunction实现tooltip格式化时，必须在构造函数的第二个参数数组中列出所有要访问的属性名，否则无法从图表上下文获取到对应值
• 单序列场景下data必须传一维点集合，不要使用二维嵌套集合，避免数据解析异常

内容的提问来源于stack exchange，提问作者K Pradeep Kumar Reddy