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

Question

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

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

注意：文本将是动态的

在工具提示属性中，我们只找到了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>"
}

输出如下。

对此有什么建议吗？

Answer 1

FusionCharts 工具提示不支持在工具提示中设置多种背景颜色。

工具提示也无法设置背景图像，或者作为解决方法，您可以在“toolText”属性中设置背景图像。并在 div 中设置图像，如下所示：

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

要设置文本和图像，需要使用“toolText”属性中的标签来实现：

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

Answer 2

您可以尝试这种方式希望对您有所帮助，请参考演示fiddle

    const dataSource = {
      "chart": {
        "caption": "Greenhouse gas emissions produced by foods ",
        "subCaption": "During Production",
        "yAxisName":"Kg Co₂E",
         "showValues":"0",
        "yAxisMaxValue":"25",
        "yAxisMinValue":"0",
         "showToolTip":"1",
        "theme": "fusion"
      },
      "data": [{
          "label": "Lamb",
          "value": "22"
        },
        {
          "label": "Beef",
          "value": "16"
        },
        {
          "label": "Farmed Salmon",
          "value": "4"
        },
        {
          "label": "White Rice",
          "value": "3.9"
        },
        {
          "label": "Brown Rice",
          "value": "3.54"
        },
        {
          "label": "Eggs",
          "value": "2.5"
        }
      ]
    };

FusionCharts.ready(function() {
  var myChart = new FusionCharts({
    type: "spline",
    renderAt: "chart-container",
    width: "100%",
    height: "400",
    dataFormat: "json",
    dataSource
  }).render();
   function handler(eventObj, dataObj) {

     var id =eventObj.data.dataIndex;
     if(id===0)
       {
         myChart.setChartAttribute("plottooltext", "<div id='nameDiv' style='font-size: 12px; font-weight:bold; padding-bottom: 3px; text-align: center; display: inline-block;border-style: none; background-color: #ffffff;' ><img style='height:40px; width:50px;background-color: #ffffff;' src='https://2.bp.blogspot.com/-yiqNTXFRiAI/UICj02XTQ0I/AAAAAAAAAIg/xVPoKagJEm0/s1600/CABRA.jpg'</div>{br}Co<sub>2</sub>E: <b>$dataValue</b>");
       }
     else if(id===1){
       myChart.setChartAttribute("plottooltext", "<div id='nameDiv' style='font-size: 12px; font-weight:bold; padding-bottom: 3px; text-align: center; display: inline-block;border-style: none;background-color: #ffffff;' ><img style='height:50px; width:60px;background-color: #ffffff;' src='https://banner2.kisspng.com/20180221/vuq/kisspng-sheep-cattle-horse-livestock-farm-vector-animal-cow-5a8d75a1e781b6.1693995215192201299483.jpg'</div>{br}Co<sub>2</sub>E: <b>$dataValue</b>");
     }
       else if(id===2){
       myChart.setChartAttribute("plottooltext", "<div id='nameDiv' style='font-size: 12px; font-weight:bold; padding-bottom: 3px; text-align: center; display: inline-block;border-style: none;background-color: #ffffff;' ><img style='height:40px; width:50px;background-color: #ffffff;' src='https://banner2.kisspng.com/20180707/lqx/kisspng-sardine-coho-salmon-trout-atlantic-salmon-salmon-5b418018d671c4.2868322115310192888784.jpg'</div>{br}Co<sub>2</sub>E: <b>$dataValue</b>");
     }
       else if(id===3){
       myChart.setChartAttribute("plottooltext", "<div id='nameDiv' style='font-size: 12px; font-weight:bold; padding-bottom: 3px; text-align: center; display: inline-block;border-style: none;background-color: #ffffff;' ><img style='height:40px; width:50px;background-color: #ffffff;' src='https://cdn-a.william-reed.com/var/wrbm_gb_food_pharma/storage/images/5/1/8/1/1411815-1-eng-GB/Genetically-engineered-rice-proves-to-produce-high-yields-of-rotavirus-specific-antibody.jpg'</div>{br}Co2E: <b>$dataValue</b>");
     }
       else if(id===4){
       myChart.setChartAttribute("plottooltext", "<div id='nameDiv' style='font-size: 12px; font-weight:bold; padding-bottom: 3px; text-align: center; display: inline-block;border-style: none;' ><img style='height:40px; width:50px;' src='https://imageresizer.pollotropical.fuzzhq.com/resize/?source=https://koala-marketing-api-production.s3.amazonaws.com/pollo-tropical/assets/BrownRice.png&height=9999&width=600&max_quality=85'</div>{br}Co<sub>2</sub>E: <b>$dataValue</b>");
     }
       else if(id===5){
       myChart.setChartAttribute("plottooltext", "<div id='nameDiv' style='font-size: 12px; font-weight:bold; padding-bottom: 3px; text-align: center; display: inline-block;border-style: none;' ><img style='height:40px; width:50px;' src='https://us.123rf.com/450wm/andegro4ka/andegro4ka1504/andegro4ka150400029/39383340-stock-vector-broken-egg-shells-isolated-on-white-photo-realistic-vector-illustration.jpg?ver=6'</div>{br}Co<sub>2</sub>E: <b>$dataValue</b>");
     }
    }
  myChart.addEventListener("dataplotRollOver", handler);
  

});

参考文档 - https://www.fusioncharts.com/features/tooltips