JQPLOT의 사용자 정의 마커

Question

마커에 여러 가지 효과를 추가 할 수있는 방법이 있습니까?

선, 색상 및 그림자 속성이 모두 있다는 것을 알고 있지만 다음 디자인을 만들 때 도움이 될 수 있습니다. 그러나 지난 2 시간 동안 실패했지만 전혀 아무런 변화가 없었습니다.

seriesDefaults: { 
    lineWidth: 50, 
    color: 'yellow', 
    markerRenderer: $.jqplot.MarkerRenderer, 
    markerOptions: { 
     show: true, 
     style: 'circle', 
     color: 'white', 
     lineWidth: 4, 
     size: 25, 
     shadow: true, 
     shadowAngle: 0, 
     shadowOffset: 0, 
     shadowDepth: 1, 
     shadowAlpha: 0.07 
    } 
} 

내가 필요 같은 다음과 같은 속성을 느낄

: markerBackgroundColor, markerShadowSize 내 결과를 달성했다.

내가 css3로 할 수 있는게 있나요? 같은 마커 및 스타일에 대한 내 자신의 HTML을 만들 수 있습니까?

Answer 1

markerOptions 속성을 사용해 보았습니다. 실패했습니다. 그러므로 나는 내 자신의 ShapeRenderer을 써서 반투명 한 바깥 쪽 원과 안쪽 마커 원을 그리기 위해 기본 jqPlot 대신에 이것을 사용했다. 최종 결과는 다음과 같습니다

난 그냥이 (즉, 색상과 원 반경이 ShapeRenderer에 정의)이 방법을 수행 할 수있는 방법을 보여주기 위해 신속하고 더러운 솔루션을 완료했습니다. 이렇게하려면 좀 더 우아하고 재사용 가능한 방법은 색상, 반지름 등을 옵션에 정의하고 전달 된 옵션을 사용하여 사용자 정의 ShapeRenderer 작업을 수정하는 것입니다.

사용자 정의 ShapeRenderer 코드는 다음과 같습니다 (이) 외부 자바 스크립트 파일에 밖으로 고려 될 수있는 다음과 같이

(function ($) { 
    $.jqplot.customMarkerRenderer = function (options) { 
     $.extend(true, this, options); 
    }; 

    $.jqplot.customMarkerRenderer.prototype.init = function (options) { 
     $.extend(true, this, options); 
    }; 

    $.jqplot.customMarkerRenderer.prototype.draw = function (ctx, points, options) { 
     ctx.save(); 

     // Shadow 
     ctx.lineWidth = 30; 
     ctx.strokeStyle = 'rgba(108, 161, 93, 0.3)'; 
     ctx.beginPath(); 
     ctx.arc(points[0], points[1], points[2], points[3], points[4], true); 
     ctx.closePath(); 
     ctx.stroke(); 

     // Yellow inner 
     ctx.lineWidth = 10; 
     ctx.fillStyle = '#F6C528'; 
     ctx.beginPath(); 
     ctx.arc(points[0], points[1], points[2], points[3], points[4], true); 
     ctx.closePath(); 
     ctx.fill(); 

     ctx.restore(); 
    }; 
})(jQuery); 

는 그것은 jqchart 옵션에서 정의 할 수 있습니다 :

markerOptions: { 
    ... 
    shapeRenderer: new $.jqplot.customMarkerRenderer() 
} 

내가 이것을 보여주기 위해 Fiddle을 만들었습니다.

Answer 2

비슷한 문제가 있습니다. 문맥에 모양을 그리기보다는 문맥에 이미지를 그리는 것이 더 좋았습니다. 포인트 대신 임의의 이미지를 그릴 수있는 렌더러 플러그인을 만들었습니다.

플러그인에 대한 코드는 여기에 있습니다 : u는 이것에 대한 해결책을 가지고 않았다

(function($) { 
    $.jqplot.ImageMarkerRenderer = function() { 
     $.jqplot.MarkerRenderer.call(this); 
     //image element which should have src attribute populated with the image source path 
     this.imageElement = null; 
     //the offset to be added to the x position of the point to align the image correctly in the center of the point. 
     this.xOffset = null; 
     //the offset to be added to the y position of the point to align the image correctly in the center of the point. 
     this.yOffset = null; 
    }; 
    $.jqplot.ImageMarkerRenderer.prototype = new $.jqplot.MarkerRenderer(); 
    $.jqplot.ImageMarkerRenderer.constructor = $.jqplot.ImageMarkerRenderer; 

    $.jqplot.ImageMarkerRenderer.prototype.init = function(options) { 
     options = options || {}; 
     this.imageElement = options.imageElement; 
     this.xOffset = options.xOffset || 0; 
     this.yOffset = options.yOffset || 0; 
     $.jqplot.MarkerRenderer.prototype.init.call(this, options); 
    }; 

    $.jqplot.ImageMarkerRenderer.prototype.draw = function(x, y, ctx, options) { 
     //draw the image onto the canvas 
     ctx.drawImage(this.imageElement, x + this.xOffset, y + this.yOffset); 
     ctx.restore(); 
     return; 
    }; 
})(jQuery); 

자세한 내용은 내 github page