Программно установить маркер на сюжет

Я хотел бы знать, возможно ли программно выделить маркер на графике.

У меня есть линейный график и отдельная сетка данных.

При щелчке маркера на линейном графике будет выделена соответствующая строка в сетке данных, а при щелчке строки в сетке данных будет выделен соответствующий маркер на линейном графике.

В приведенном ниже примере я могу выполнить первое требование.$('#chartdiv').bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data) возвращает точку данных, которую я могу использовать, чтобы найти соответствующую строку сетки данных.

Но я застрял на обороте.

В моем примере я заменил сетку данных на кнопку для простоты.

Есть лиSetSelectedMarker или какой-то похожий метод, который я не знаю?

<code><!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>
</code>

Спасибо за любую помощь

 Mark03 мая 2012 г., 15:09
какой вид подсветки вы хотите? Вы просто хотите открыть подсвечивающий div?
 Paddy03 мая 2012 г., 15:44
@Mark Да, в основном это демо :(jqplot.com/tests/cursor-highlighter.php) Щелкните строку в таблице, точка на графике обернется вокруг нее и / или отобразится метка данных. Я полагаю, это то, что вы имеете в виду?

Ответы на вопрос(3)

Решение Вопроса

@Mark, возможно, знает лучший вариант, если он знает, как открыть подсветку. Так как я знаю, как получить подходящую позицию, за которой вы находитесь, просто я не уверен, как вызвать маркер, чтобы рисовать по этим координатам.

Здесь идет мой ответ.

Я просто получаю координаты сетки в пикселях. Затем захватываете холст и рисуете круг, заранее всегда звоняreplot() иметь свежий сюжет. Попробуйте использовать кнопку несколько раз, чтобы увидеть, как она проходит через каждую точку данных. Если вы знаете, ребята, как его улучшить, например, как избежать повторной реплантации каждый раз, тогда, пожалуйста, дайте мне знать.

 03 мая 2012 г., 22:17
@ Большое спасибо за этот комментарий. Я обновил свой код соответственно.
 Paddy04 мая 2012 г., 09:23
Спасибо обоим. Это выглядит великолепно
 03 мая 2012 г., 20:02
люблю ваше решение. Единственное улучшение, которое я могу придумать, - это использовать отдельный холст, чтобы нарисовать «выделение». маркер. Это то, что делает плагин выделения, чтобы он мог очистить свой собственный холст, и вам не нужно перерисовывать весь график. Фактически, если у вас включено выделение, вы можете использовать его холст:jsfiddle.net/DEGCv

которая используется в плагине выделения как показано здесь. Другой вариант может состоять в том, чтобы изменить сам плагин и создать новое событие или открыть функцию рисования и т. Д.

Подсвеченный маркер изменится, как только вы наведете указатель мыши на другой маркер на линейном графике, но этого и следовало ожидать.

Было бы неплохо показать всплывающую подсказку, когда маркер выделен.

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);
}

попробуйте изменить строку параметров с помощью новых цветов серии, потому что эта функция возвращает только нажатую точку. Но вы должны изменить цвет вручную самостоятельно.

 Paddy03 мая 2012 г., 09:28
Не могли бы вы расширить свой ответ? Я думаю, что вы смотрите на неправильную функцию, я хочу выделить точку на графике (DoSomething(plot) метод) не обновлять таблицу - эта часть работает нормально.
 03 мая 2012 г., 10:23
Ссылка, которую я сказал вам,jqplot.com/tests/point-labels.php
 03 мая 2012 г., 10:21
Но я боюсь, что я думаю, что невозможно просто изменить цвет одной точки с этой библиотекой, но вы можете сделать что-то вроде этого, перейдя по следующей ссылке и 2-му примеру. как здесь, вы можете добавить третий параметр и выделить его отметкой. В противном случае я не думаю, что вы можете изменить цвет одной точки и использовать нулевые значения для точек, которые вы не хотите выделять [[-12, 7, null], [-3, 14, null], [2 , -1, «(низкий)», [7, -1, «(низкий)»], [11, 11, null], [13, -1, «(низкий)»] ] ;. Таким образом, вам придется перерисовать график после добавления этой подсветки, когда после нажатия

Ваш ответ на вопрос