jQWidgets jqxBulletChart tooltipFormatFunction 属性

概述

jQWidgets jqxBulletChart 是一款基于 jQuery 的图表插件，用于绘制基于目标值、实际值以及刻度值的数据可视化图表，其中 tooltipFormatFunction 属性是用于自定义 tooltip 显示内容的函数。

用法

$("#jqxBulletChart").jqxBulletChart({
    ...
    tooltip: {
        visible: true,
        formatFunction: customTooltipFunction
    }
});

function customTooltipFunction(data) {
    // 自定义 tooltip 显示内容的代码
}

参数

tooltipFormatFunction 函数接收一个 data 参数，该参数包含了 tooltip 所需的数据信息，具体数据格式如下：

{
    index: 0, // 当前的指标索引
    seriesIndex: 0, // 当前的数据系列索引
    value: 10, // 当前的实际值
    target: 50, // 当前的目标值
    min: 0, // 最小值
    max: 100, // 最大值
    formatSettings: { ... }, // 格式化设置
    title: "指标标题", // 当前指标的标题
    description: "指标描述" // 当前指标的描述
}

返回值

tooltipFormatFunction 函数应该返回一个字符串，表示 tooltip 显示的文本内容。

示例

function customTooltipFunction(data) {
    var tooltipHTML = "<div>";
    tooltipHTML += "<div style='font-size: 16px;'>" + data.title + "</div>";
    tooltipHTML += "<div style='margin-top: 5px; margin-bottom: 10px;'>" + data.description + "</div>";
    tooltipHTML += "<div style='font-size: 12px;'><b>实际值:</b> " + data.value + "</div>";
    tooltipHTML += "<div style='font-size: 12px;'><b>目标值:</b> " + data.target + "</div>";
    tooltipHTML += "</div>";
    return tooltipHTML;
}

返回的字符串为 markdown 格式：

<div>
<div style='font-size: 16px;'>指标标题</div>
<div style='margin-top: 5px; margin-bottom: 10px;'>指标描述</div>
<div style='font-size: 12px;'><b>实际值:</b> 10</div>
<div style='font-size: 12px;'><b>目标值:</b> 50</div>
</div>

注意事项

1. tooltipFormatFunction 函数需要返回一个字符串，不支持返回其它类型的数据。
2. 如果未设置 tooltipFormatFunction 函数，则 tooltip 将会使用默认的显示格式。