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代码如下(这可以被分解为外部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()
}

我创造了一个小提琴来证明这一点.