浮點圖中的高亮線

Question

是否可以用flot突出顯示折線圖？ 我只看到數據點的突出顯示，而看不到數據點之間的線。

我使用以下示例中的代碼。

$("#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;            
        }
    }
});

Answer 1

在flot 0.7的來源中，沒有包含突出顯示行的功能。

但是，如果您想擴展flot做您想做的事...

Flot有一個“覆蓋”畫布，可用於執行諸如突出顯示的效果。 這在源中具有關聯的上下文octx 。 如果查看方法drawPointHighlight(series, point) ，則可以看到如何對數據點進行突出顯示。 您可以為行編寫類似的方法。

drawOverlay()函數遍歷一系列突出顯示的對象-您可能希望對其進行擴展以處理“線”對象。

最后，您將需要編寫一種方法來從可突出顯示的對象數組中添加/刪除行，類似於現有的highlight()和unhighlight()方法。 注意，這些方法使用以下行公開：

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

Answer 2

可以嘗試使用兩個不同的系列（每個具有適當的顏色）來代替突出顯示特定的線段（或系列中的一組數據點），而不是突出顯示特定的線段嗎？

我使用條形圖來執行此操作，以便能夠在圖表的圖形上顯示其他尺寸，並且效果很好。

注意：我主要是在條形圖上使用浮點數，因此，如果系列線下降到水平軸以獲得零值，則每次要更改顏色（或改回顏色）時，可能都必須使用單獨的系列）。

Answer 3

最簡單的方法是僅使用“ plothover”事件來重新呈現圖表。 浮點渲染速度非常快，因此不應有任何閃爍。 我目前在一個項目中這樣做，效果很好。

您可以在此處找到有關'plothover'和'plotclick'事件的文檔： https : //github.com/flot/flot/blob/master/API.md#customizing-the-grid

flot的一個未記錄的功能是可以向每個系列對象添加任意鍵，並且這些鍵將在'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();
});

注意-這僅在將鼠標懸停在實際數據點上時有效。