条形图中的高亮显示行

是否可以使用flot高亮显示折线图？我只看到突出显示数据点，而不是点之间的界限。条形图中的高亮显示行

我使用以下代码example。

$("#placeholder").bind("plothover", function (event, pos, item) { 
    $("#x").text(pos.x.toFixed(2)); 
    $("#y").text(pos.y.toFixed(2)); 

    if ($("#enableTooltip:checked").length > 0) { 
     if (item) { 
      if (previousPoint != item.dataIndex) { 
       previousPoint = item.dataIndex; 

       $("#tooltip").remove(); 
       var x = item.datapoint[0].toFixed(2), 
        y = item.datapoint[1].toFixed(2); 

       showTooltip(item.pageX, item.pageY, 
          item.series.label + " of " + x + " = " + y); 
      } 
     } 
     else { 
      $("#tooltip").remove(); 
      previousPoint = null;    
     } 
    } 
});

来源

2011-11-10 LuckyStrike

code ...... ?????? –

我正在寻找同样的东西......你可以使用plothover并找出自己，如果鼠标在一条线上，但我想要一个更简单的方法。 –

查看flot 0.7的源代码，没有包含突出显示行的功能。

但是，如果你想扩展海军报给你想要做什么......

海军报有一个“叠加”画布它用来做这样突出的效果。这在源中具有关联的上下文octx。如果你看看drawPointHighlight(series, point)的方法，你可以看到数据点是如何突出显示的。你可以为线条写一个类似的方法。

drawOverlay()函数遍历一个高亮度对象数组 - 你也可以扩展它来处理“线”对象。

最后，您需要编写一个方法来添加/删除高亮对象数组中的行，类似于现有的highlight()和unhighlight()方法。注意这些方法使用的线路公之于众：

plot.highlight = highlight; 
plot.unhighlight = unhighlight;

来源

2012-07-24 02:47:14 fuzic

而不是刻意突出（一系列内或数据点的组）特定的线段，你能不能使用两个不同的系列（每一个合适的颜色）做你想做的事情？

我用条形图来做到这一点，以便能够在图表的图表上显示额外的维度，并且工作得相当好。

注意：我主要使用flot作为条形图，所以如果您的系列线下降到水平轴的零值，您可能必须在每次希望颜色改变时使用单独的系列（或改回）。

来源

2012-07-25 14:04:18

最简单的事情就是使用'plothover'事件来重新渲染图表。 Flot渲染非常快，所以不应该有任何闪烁。目前我在一个项目中这样做，而且效果很好。

您可以找到“plothover”和“plotclick”事件文档在这里： https://github.com/flot/flot/blob/master/API.md#customizing-the-grid

海军报的无证功能，你可以任意键添加到每个系列的对象，这些键将可用'plothover'和'plotclick'事件处理程序。在我的示例中，我创建了一个名为'key'的任意键，如果您使用的是标签，则可以使用'label'。

下面是一个例子：

$(function() { 

    var d1 = []; 
    for (var i = 0; i < 14; i += 0.5) { 
    d1.push([i, Math.sin(i)]); 
    } 
    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]]; 
    var d3 = [[0, 12], [7, 12], [7, 2.5], [12, 2.5]]; 

var data = [ 
    {key: 'd1', data: d1}, 
    {key: 'd2', data: d2}, 
    {key: 'd3', data: d3} 
    ]; 

    function plotChart(lineKey) { 
     $.each(data, function(index, line){ 
     line.lines = { 
      lineWidth: (lineKey === line.key) ? 3 : 0.5 
     } 
     $.plot("#placeholder", data, {grid : {hoverable: true}}); 
    }); 
    } 

    var previousPoint = null; 
    $('#placeholder').on('plothover', function(e, position, item){ 
    if (item) { 
     if (previousPoint == null || previousPoint[0] !== item.seriesIndex || previousPoint[1] !== item.dataIndex) { 
     previousPoint = [item.seriesIndex, item.dataIndex]; 
     plotChart(item.series.key); 
     } 
    } else { 
     plotChart(); 
     previousPoint = null;    
    } 
    }); 

    plotChart(); 
});

注 - 将鼠标悬停在一个实际的数据点时，这仅适用。

来源

2013-02-02 23:15:17

条形图中的高亮显示行

回答

相关问题