你好！在上一集关于如何调整现有Lumira可视化扩展以满足您的需求的小博客系列中，我们讨论了向扩展添加工具提示的主题。同时，在这个博客中，我们将介绍如何添加数据标签到您的数据点！
数据标签，国内云服务器哪家好，如工具提示和其他属性，在原生Lumira可视化图表中是现成的，手机免费建站，但默认情况下它们不带扩展。但是，与所有其他属性一样，很有可能将它们添加到自定义Lumira可视化扩展中。为了代码清晰，我们将在所有其他内容（呈现所有图表元素，甚至工具提示）的末尾添加数据标签代码！
第1步：分配切换对象
为了获得良好的用户体验，我们希望根据情况，为最终用户提供能够看到或隐藏数据标签的选项。要启用此功能，我们可以使用切换按钮来切换数据标签的显示和隐藏。它可以是一个相关的对象，比如复选框。我们将把"show"条件指定给一个变量"showLabels"。
第2步：追加切换对象
现在我们将把这个对象作为复选框添加到画布上。它将作为异物或元素附加。
注意：在自定义Lumira图表中添加异物时请小心。将它们附加到"div"而不是"body"元素。"body"是Lumira的通用DOM结构的标记，数据分析方法，这将导致在Lumira中呈现图表时发生冲突。相反，将它附加到一个随机的"div"。
我们得到的结果是图表右上角的以下对象。
第3步：显示事件的函数
现在在.on（"click"，函数（d）{}）中；添加以下代码段
showLabels=！showLabels；
if（showLabels）{
}
else{
}
我们在这里做的是，我们定义条件（无论复选框是否选中），企业信息化管理软件，以便我们可以定义在这些条件下发生的事情。为此，我们使用if-else条件来设置标签的开关。
在if（showLabels）{}部分，添加以下代码片段：
//使用分配给checkbox元素
$（"#sap#vizŠextŠbubblechartŠcheck"）.prop（'checked'，true）；
气泡.append（"文本"）
.attr（"文本锚定"，"middle"）
.attr（"dx"，function（d）{
return x（d[measure1]）；//x position for data label
}
.attr（"dy"，function（d）{
return y（d[measure2]）；//y position for data label
}
.attr（"font-size"，"12px"）
.attr（"font-family"，"Sans-Serif"）
.text（function（d）{
return d[dim]；//text to display as data label
}）；
在else{}节中，云产品，添加以下代码段：
//使用分配给checkbox元素
$（"#sap#vizŠextŠbubblechartŠcheck"）.prop（'checked'，false）；
气泡。全选（"text"）.remove（）；
我们得到最终结果：
选中复选框：
取消选中复选框：
您也可以继续尝试！
请继续关注我们的下一集：添加图像！
快乐数据标签！！
