在绘图上以编程方式设置标记
我想知道是否可以以编程方式突出显示标记上的标记。
我有一个折线图和一个单独的数据网格。
单击折线图中的标记将突出显示数据网格中的相关行，单击数据网格中的行将突出显示折线图中的相关标记。
在下面的例子中，我可以做第一个要求。 $('#chartdiv').bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data)返回我可以用来查找相关数据网格行的数据点。
但我坚持反过来。
在我的示例中，为简单起见，我已使用按钮替换了datagrid。
是否有SetSelectedMarker或我不知道的类似方法？
jqPlot examples ul.tooltip { list-style-type:none; padding:0px; margin:0px; } // 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: '- %.4f
- %.6f
' }, 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 *** }
谢谢你的帮助
我想出了一些答案。 如果他知道如何弹出荧光笔，我认为@Mark可能知道更好的选择。 因为我知道如何获得你所追求的合适位置，所以我不知道如何调用荧光笔然后在这个坐标处绘画。
这是我的答案。
我只是以像素为单位获取网格的坐标。 然后抓住高亮canvas并在那里画一个圆圈，事先总是调用replot()来创建一个新的情节。 尝试使用该按钮几次，看看它是如何覆盖数据的每个点。 如果你知道如何改进它，例如，如何避免每次重新绘制，那么请告诉我。
你可以实现高亮插件中使用的绘图function，如下所示。 另一种选择可能是更改插件本身并创建新事件或公开绘图function等。
只要将鼠标移动到折线图中的另一个标记上，突出显示的标记就会改变，但这是预期的。
当标记设置为突出显示时，显示工具提示会很不错。
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); }
如果要更改颜色，请尝试使用新系列颜色修改选项字符串，因为该函数仅返回单击的点。 但您必须自己手动更改颜色。