Question

有没有办法为标记添加多种不同的效果？

我知道有线条，颜色和阴影属性，所有这些都可以帮助我尝试创建以下设计，但是在过去的2个小时里我一直都失败了，并且一无所获！

enter image description here

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来绘制半透明的外圆和内部标记圆。最终结果如下：

enter image description here

我刚刚做了一个快速而肮脏的解决方案来展示如何以这种方式完成（即颜色和圆半径在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 page

提供了更多信息

JQPLOT的自定义标记

2 个答案: