以編程方式在圖上設置標記

我想知道是否可以通過編程方式突出顯示圖上的標記。以編程方式在圖上設置標記

我有一個線圖和一個單獨的數據網格。

點擊線圖表內的標記將突出在數據網格中的相關行，並點擊在數據網格中的一行將突出線圖中的相關標記物。

在下面的例子中，我可以做第一個要求。 $('#chartdiv').bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data)返回我可以用來查找相關數據網格行的數據點。

但是我被卡住了。

在我的例子中，爲了簡單起見，我用一個按鈕替換了數據網格。

是否有SetSelectedMarker或一些類似的方法，我不知道嗎？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>jqPlot examples</title> 
    <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="js/jquery.jqplot.1.0.0r1095/dist/excanvas.min.js"></script><![endif]--> 
    <!-- jQuery runtime minified --> 
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.7.1.min.js" type="text/javascript"></script> 

     <style type="text/css">   
    ul.tooltip 
    { 
    list-style-type:none; 
    padding:0px; 
    margin:0px; 
    }   
     </style> 

    <script class="include" type="text/javascript" src="js/jquery.jqplot.1.0.0r1095/dist/jquery.jqplot.min.js"></script> 
    <script class="include" type="text/javascript" src="js/jquery.jqplot.1.0.0r1095/dist/plugins/jqplot.canvasTextRenderer.min.js"></script> 
    <script class="include" type="text/javascript" src="js/jquery.jqplot.1.0.0r1095/dist/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script> 
    <script class="include" type="text/javascript" src="js/jquery.jqplot.1.0.0r1095/dist/plugins/jqplot.highlighter.js"></script> 

     <script type="text/javascript"> 
     // We use a document ready jquery function. 
      $(document).ready(function() { 

       // Some simple loops to build up data arrays. 
       var cosPoints = []; 
       for (var i = 0; i < 2 * Math.PI; i += 0.4) { 
        cosPoints.push([i, Math.cos(i)]); 
       } 

       var plot3 = $.jqplot('chartdiv', [cosPoints], 
       { 
        highlighter: { 
         show: true 
         , showTooltip: true 
         , tooltipLocation: 'ne' 
         , tooltipAxes: 'xy' 
         , useAxesFormatters: null 
         , formatString: '<div><ul class="tooltip"><li>%.4f</li><li>%.6f</li></ul></div>' 
        }, 
        title: 'Line Style Options', 
        // Series options are specified as an array of objects, one object 
        series: [ 
         { 
          // Change our line width and use a diamond shaped marker. 
          lineWidth: 2, 
          color: 'red', 
          markerOptions: { style: 'dimaond', color: 'black' } 
         }, 
         { 
          // Don't show a line, just show markers. 
          // Make the markers 7 pixels with an 'x' style 
          showLine: false, 
          markerOptions: { size: 7, style: "x" } 
         }, 
         { 
          // Use (open) circlular markers. 
          markerOptions: { style: "circle" } 
         }, 
         { 
          // Use a thicker, 5 pixel line and 10 pixel 
          // filled square markers. 
          lineWidth: 5, 
          markerOptions: { style: "filledSquare", size: 10 } 
         } 
        ] 
        , cursor: { show: true, showTooltip: true } 
       } 
      ); 


       $('#chartdiv').bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data) { 
        alert(data); 
       }); 

       $('#button').bind("click", function() { 
        DoSomeThing(plot3); 
       }); 
      }); 

      function DoSomeThing(plot) { 
      // *** highlight point in plot *** 
      } 

    </script> 
</head> 
<body> 

<!--plot container--> 
<div id="chartdiv" style="height:400px;width:600px; "></div> 
<input id="button" type="button" value="click"/> 

</body> 
</html>

感謝所有幫助

來源

2012-05-02 Paddy

你想要什麼樣的亮點？你只是想彈出熒光筆div？ – Mark

@Mark是的，基本上這個演示：（http://www.jqplot.com/tests/cursor-highlighter.php）點擊表格中的行，點上的圖形將暈輪和/或顯示數據標籤。我認爲這就是你的意思？ – Paddy

我想出了一些答案。如果他知道如何彈出熒光筆，我認爲@Mark可能會知道更好的選擇。由於我知道如何獲得適當的位置，所以我不知道如何調用熒光筆然後在此座標上繪畫。

Here goes my answer.

我只是越來越像素網格的座標。然後抓住突出的畫布並在那裏畫一個圓圈，事先總是呼籲replot()有一個新的陰謀。嘗試使用按鈕幾次，看看它是如何遍歷數據的每個點。如果你知道如何改進它，例如，如何避免每次重新繪製，那麼請讓我知道。

來源

2012-05-03 15:28:07 Boro

愛您的解決方案。我能想到的唯一改進就是使用單獨的畫布繪製「高光」標記。這是熒光筆插件的功能，它可以清除它自己的畫布，而且不必重繪整個陰謀。事實上，如果你有突出顯示啓用，你可以使用它的畫布：http://jsfiddle.net/DEGCv/ – Mark

@Mark非常感謝你的評論。我相應地更新了我的代碼。 – Boro

謝謝。這看起來不錯 – Paddy

如果你想改變顏色嘗試用新的系列的顏色修改您的選項字符串，因爲該功能只返回被點擊的點。但是你必須自己手動改變顏色。

來源

2012-05-03 06:49:08

你可以擴展你的答案嗎？我認爲你正在看錯功能，我想突出顯示圖上的一個點（'DoSomething（plot）'方法）而不更新表 - 該部分工作正常。 – Paddy

但是恐怕我認爲用這個庫改變一個點的顏色是不可能的，但是你可以像這樣做下面的鏈接和第二個例子。就像在這裏你可以添加第三個參數並用標記突出顯示它。否則，我不認爲你可以改變一個點的顏色，併爲不想突出顯示的點使用空值[[-12,7，null]，[-3,14，null]，[2 ，-1，'（low）']， [7，-1，'（low）']，[11,11，null]，[13，-1，'（low）']];因此，在點擊發生後添加此高亮標籤後，您必須重繪該圖。 –

我告訴您的鏈接是http://www.jqplot.com/tests/point-labels.php –

你可以只實施在高亮插件使用如下所示的抽獎功能。另一種選擇可能是更改插件本身並創建新事件或暴露繪圖功能等。

只要將鼠標移動到折線圖中的另一個標記上，突出顯示的標記就會更改，但這是爲了被期望。

當標記設置爲突出顯示時，顯示工具提示會很好。

function DoSomeThing(plot) { 

    var hl = plot.plugins.highlighter; 
    var s = plot.series[0]; 
    var smr = s.markerRenderer; 
    var mr = hl.markerRenderer; 
    mr.style = smr.style; 
    mr.lineWidth = smr.lineWidth + hl.lineWidthAdjust; 
    mr.size = smr.size + hl.sizeAdjust; 
    var rgba = $.jqplot.getColorComponents(smr.color); 
    var newrgb = [rgba[0], rgba[1], rgba[2]]; 
    var alpha = (rgba[3] >= 0.6) ? rgba[3]*0.6 : rgba[3]*(2-rgba[3]); 
    mr.color = 'rgba('+newrgb[0]+','+newrgb[1]+','+newrgb[2]+','+alpha+')'; 
    mr.init(); 
    mr.draw(s.gridData[3][0], s.gridData[3][1], hl.highlightCanvas._ctx); 
}

來源

2012-05-05 09:17:33 jpm

以編程方式在圖上設置標記

回答

相關問題