2

プロット上のマーカーをプログラムで強調表示できるかどうかを知りたいです。

折れ線グラフと別のデータ グリッドがあります。

折れ線グラフ内のマーカーをクリックすると、データ グリッド内の関連する行が強調表示され、データ グリッド内の行をクリックすると、折れ線グラフ内の関連するマーカーが強調表示されます。

以下の例では、最初の要件を実行できます。$('#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>
4

3 に答える 3

5

私はいくつかの答えを思いつきました。@Mark が蛍光ペンをポップアップする方法を知っていれば、より良いオプションを知っていると思います。あなたが求めている適切な位置を取得する方法を知っているので、ハイライターを呼び出してこの座標でペイントする方法がわかりません。

これが私の答えです。

グリッドの座標をピクセル単位で取得しているだけです。次に、ハイライトキャンバスをつかんでそこに円を描き、事前に常にreplot()新鮮なプロットを求めます。ボタンを数回使用して、データのすべてのポイントをどのように処理するかを確認してください。たとえば、毎回再プロットを回避する方法など、それを改善する方法を知っている場合は、私に知らせてください.

于 2012-05-03T15:28:07.003 に答える
1

ここに示すように、ハイライト プラグインで使用される描画関数を実装するだけです。別のオプションとして、プラグイン自体を変更して新しいイベントを作成するか、描画関数を公開するなどがあります。

強調表示されたマーカーは、マウスを折れ線グラフの別のマーカーの上に移動するとすぐに変化しますが、これは予期されたものです。

マーカーが強調表示に設定されているときにツールチップが表示されると便利です。

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-05T09:17:33.087 に答える
0

色を変更したい場合は、オプションの文字列を新しいシリーズの色で変更してみてください。この関数はクリックされたポイントのみを返すためです。ただし、自分で手動で色を変更する必要があります。

于 2012-05-03T06:49:08.877 に答える