Custom Token for JQPLOT

Question

Is there a way to add several different effects to the marker?

I know that the properties of the line, color, and shadow can help me create the next design, but I failed in the last 2 hours and came up with nothing!

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

I need the following attributes: markerBackgroundColor, markerShadowSizeto achieve my result.

Is there something I can do with css3? for example create your own html for marker and style, which?

Answer 1

markerOptions, , . ShapeRenderer jqPlot, , . :

, , ( ShapeRenderer). ( ) , .. ShapeRenderer .

ShapeRenderer ( Javascript):

(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

. , , . , .

:

(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