如何在flot图表中设置工具提示文字颜色？

我正在使用具有多个系列数据的flot图表。我想要更改Flot图表中的工具提示文本颜色。我使用此代码：如何在flot图表中设置工具提示文字颜色？

$("#placeholder").bind("plothover", function (event, pos, item) { 
if (item) { 
    $("#tooltip").remove(); 
    var hoverSeries = item.series; 
    var x = item.datapoint[0], 
     y = item.datapoint[1]; 
    var strTip = x + "/" + y + " for " + item.series.label; 

    var allSeries = plot.getData(); 
    $.each(allSeries, function(i,s){ 
     if (s == hoverSeries) return; 
     $.each(s.data, function(j,p){ 
      if (p[0] == x){ 
       strTip += "</br>" + p[0] + "/" + p[1] + " for " + s.label; 
      } 
     });    
    }); 
    showTooltip(item.pageX, item.pageY, strTip); 
    } 
});

任何一个颜色在工具提示？

来源

2017-07-25 Devyani Kotadiya

海军报图支持工具提示

您可以轻松地使用HTML标记HTML标签：<span>

FLOT图表工具提示方便地支持HTML标签。

使用<span>标记您可以使用s.clor风格。像这样js。

$("#placeholder").bind("plothover", function (event, pos, item) { 
if (item) { 
    $("#tooltip").remove(); 
    var hoverSeries = item.series; 
    var x = item.datapoint[0], 
     y = item.datapoint[1]; 
    var strTip = "<span style=\"color:" + item.series.color + ";\""+x + "/" + y + " for " + item.series.label + "</span>"; 

    var allSeries = plot.getData(); 
    $.each(allSeries, function(i,s){ 
     if (s == hoverSeries) return; 
     $.each(s.data, function(j,p){ 
      if (p[0] == x){ 
       strTip += "</br><span style=\"color:" + s.color + ";\"" + p[0] + "/" + p[1] + " for " + s.label + "</span>"; 
      } 
     });    
    }); 
    showTooltip(item.pageX, item.pageY, strTip); 
    } 
});

这里清楚，我已经在strTip字符串工具提示

来源

2017-07-26 11:09:23

请使用此字符串代替您的strTip。

strTip += "</br><span style=\"color:"+s.color+";\">" + p[0] + "/" + p[1] + " for " + s.label+"</span>";

使用此字符串，您将获得与您的数据系列颜色相同的工具提示文本颜色。在这里，我已经用这个在4个数据系列在单个flotchart。 [四大系列工具提示] [1]

来源

2017-07-26 10:15:57

日Thnx大量的使用item.series.color和s.color ...完美的工作.. –

如何在flot图表中设置工具提示文字颜色？

回答

相关问题