我正在做React本地项目，我们正在使用融合图表来显示不同的图形。但是，在这些图表，而用户点击的情节（图线）我们显示工具提示.
但是，我们必须像下面的截图显示工具提示.
注意：文本将是动态的

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

字符串
输出如下。

的
对此有何建议？

您可以尝试这种方式，希望它能帮助您，请参考演示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

展开查看全部

2条答案

按热度按时间

ao218c7q1#

FusionCharts工具提示不支持在工具提示中设置多个背景色。
此外，工具提示不能设置为背景图像，或者作为一种变通方法，您可以设置一个“toolText”属性。并在div中设置您的图像，如下所示：
“toolText”：“http：//www.pngpix.com/wp-content/uploads/2016/10/PNGPIX-COM-Mickey-Mouse-PNG-Transparent-Image-1-500x575.png ' style=' opacity：0.5;'>
要设置文本和图像，需要使用“toolText”属性中的标签来实现：
“toolText”：“http：//www.pngpix.com/wp-content/uploads/2016/10/PNGPIX-COM-Mickey-Mouse-PNG-Transparent-Image-1-500x575.png ' style=' opacity：0.5;'>居中”

赞(0）回复(0）举报 2023-08-07

ws51t4hk2#

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

2条答案

相关问题

热门标签

最新问答