[{"id":"bcb0874d-299b-448e-9552-9e9b25ef80dd","tags":[{"product":null,"links":null,"id":"ba7e818e-4f6b-4211-b1ac-58e3bafcf439","name":"\u66F4\u65B0","color":"orange","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"8ce3627e-9e58-471b-9133-4f135d191e7b","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"ae60ae59-34f5-4f32-a8eb-243ed1457543","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"3d4848c3-910f-4ffa-9153-60bb507334a9","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"133f4ca6-d951-4d65-a618-3dc6301266f7","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"de62ec1c-813e-40b1-8160-a4cd109afe64","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"2426c71d-8332-4cbd-a436-1ec4f8666464","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"2ce7b6b0-78aa-4e4b-bf8a-e4ba2f988298","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"4706db46-0811-4652-8f59-1e0a1da84758","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"8f1271bb-2cd9-4f39-9897-c15b239ee7ab","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"677e13a7-6f3e-449f-986c-2c3a26f8d54f","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"5e40f6dc-caec-49d7-a1d0-be65f06815ba","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"2457f0e0-9e71-4860-a87d-065e0fb84f84","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"d5c67fd0-1145-482c-9113-97b492c44c18","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"a609a8fa-ab91-4c1d-a1c3-d209d0463303","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"b4a9eb15-94e5-48df-b218-a24138f0cf9c","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]}]
产品官网 帮助文档 API 文档 视频教程 技术社区
在线Demo 免费试用
(Showing Draft Content)

鼠标提示

功能概述

在预览图表时，经常希望鼠标移至图表的数据区域时，会出现相应的提示信息，即鼠标提示。如下图所示。

image2019-4-23_17-36-57.png

操作示例

注意

使用鼠标提示功能之前需管理员在后台开启鼠标提示功能，详见查看器。开启后还可以自定义鼠标提示的样式。

鼠标提示的制作步骤与报表图表数据标签类似，选中图表的绘图区域，选择鼠标提示内容即可，如下图所示。也支持使用表达式进行自定义，用法与报表图表数据标签中的表达式用法一致。

image2020-6-5_12-0-42.png

显示数值字段名称

鼠标提示内容显示数值字段名称的设置方法没有特别之处，在鼠标提示内容属性的下拉菜单中选择“数值字段名称”即可。

image2020-10-30_15-20-37.png


预览后可见，提示的内容会带有聚合函数，这是我们不希望出现的内容。

image2020-10-30_15-21-26.png


回到设计器，选中数据字段中绑定的字段，在 属性设置 中查看其数值，可以发现其数值表达式中其实带了聚合函数。

image2020-10-30_15-23-10.png


此时我们需要在 属性设置 面板中，将数值表达式中的聚合函数删除掉，然后在下方的“聚合方式”中再进行聚合。效果如下:

image2020-10-30_15-23-52.png


此时，预览报表，可见订单金额已经显示正确。同理，将其他数值字段也做同样的调整即可。

image2020-10-30_15-24-17.png

定制鼠标提示外观样式

image2022-4-18_14-33-6.png


为了更加美观，我们可以对报表中的鼠标提示进行外观样式的美化。

这个美化工作是由管理员在管理后台统一进行设置的，进入 系统设置> 报表设置>查看器，打开鼠标提示设置项，然后 设置鼠标提示样式。

包括背景色，字体颜色，字体，以及鼠标提示边框的一些样式等。详见查看器。

另外，我们也可以使用URL参数来控制鼠标提示的样式。

这样可以更加灵活，比如我们在集成单张报表时就可以在URL中添加参数来改变这一个报表，而不影响其他报表。

参数

可用值

示例

chartTooltip

true false

? chartTooltip = false

chartTooltipBackgroundColor

$theme $none 有效的CSS颜色值。

? chartTooltipBackgroundColor = blue

? chartTooltipBackgroundColor = $theme

? chartTooltipBackgroundColor = $none

chartTooltipBorderColor

$theme $none 有效的CSS颜色值。

? chartTooltipBorderColor = $theme

chartTooltipBorderRadius

有效的数字，单位为 px或 pt

? chartTooltipBorderRadius = 5px

chartTooltipBorderSize

有效的数字，单位为 px或 pt

? chartTooltipBorderSize = 2px

chartTooltipBorderStyle

None

Dotted

Dashed

Solid

Double

Groove

Ridge

Inset

Outset

? chartTooltipBorderStyle = dotted

chartTooltipFontFamily

有效的字体类型

? chartTooltipFontFamily = Arial

chartTooltipFontSize

有效的数字，单位为 px或 pt

? chartTooltipFontSize = 10pt

chartTooltipFontStyle

Normal Italic

? chartTooltipFontStyle = normal

chartTooltipFontWeight

Lighter

Thin

ExtraLight

Light

Normal

Medium

SemiBold

Bold

ExtraBold

Heavy

Bolder

? chartTooltipFontWeight = bold

chartTooltipTextColor

$theme $none 有效的CSS颜色值。

? chartTooltipTextColor = rgb(0,0,0)