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

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>

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

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

Ваш Ответ

3   ответа
5

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

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

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

люблю ваше решение. Единственное улучшение, которое я могу придумать, - это использовать отдельный холст, чтобы нарисовать «выделение». маркер. Это то, что делает плагин выделения, чтобы он мог очистить свой собственный холст, и вам не нужно перерисовывать весь график. Фактически, если у вас включено выделение, вы можете использовать его холст:jsfiddle.net/DEGCv
@ Большое спасибо за этот комментарий. Я обновил свой код соответственно.
Спасибо обоим. Это выглядит великолепно Paddy
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);
}
0

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

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

Похожие вопросы