如何在融合图表的工具文本中在图像上显示文本 React Native答案

【问题标题】：How to display text over image in toolText for fusion charts React Native如何在融合图表的工具文本中在图像上显示文本 React Native
【发布时间】：2019-09-20 17:53:12
【问题描述】：

我正在做 React Native 项目，我们正在使用融合图表来显示不同的图表。但是，在这些图表中，当用户点击图表（图表线）时，我们会显示工具提示。

但是，我们必须显示如下截图所示的工具提示。

注意：文本将是动态的

在tooltip属性中，我们只找到了bgColor、bordercolor等，我们没有找到任何bgImage或为bg设置两个颜色。因此，我们尝试在工具文本中设置图像，但仍然遇到问题。

我们不能在图片上设置文字，它在图片的底部。

 {
          "label": "Mickey",
          "value": "92",
          "toolText": "<div class='container'><img height='50' width='50' position:relative text-align: center color: white alt='' src='http://www.pngpix.com/wp-content/uploads/2016/10/PNGPIX-COM-Mickey-Mouse-PNG-Transparent-Image-1-500x575.png'></img><div class='top-left'>Top Left</div></div>"
}

输出如下。

对此有何建议？

【问题讨论】：

标签： javascript react-native fusioncharts

【解决方案1】：

FusionCharts tooltip 不支持在 tooltip 中设置多种背景颜色。

工具提示也不能设置背景图像，或者作为一种解决方法，您可以在“toolText”属性中设置一个。并在 div 中使用如下设置您的图像：

"toolText": "http://www.pngpix.com/wp-content/uploads/2016/10/PNGPIX-COM-Mickey-Mouse-PNG-Transparent-Image-1-500x575.png' style= ' 不透明度：0.5;'>

要设置文字和图片，需要在“toolText”属性中使用如下标签来实现：

"toolText": "http://www.pngpix.com/wp-content/uploads/2016/10/PNGPIX-COM-Mickey-Mouse-PNG-Transparent-Image-1-500x575.png' style= ' 不透明度：0.5;'>居中"

【讨论】：

您在此处添加的文字在哪里？
如果没有
，上面的toolText显示为文本，除了显示之外什么都没有。