自定义 JQPLOT 标记符号

Question

有没有一种方法可以将多种不同的效果添加到标记中？

我知道有线条、颜色和阴影属性，这些都可以帮助我尝试创建以下设计，但是我已经失败了两个小时，什么也没有想出来！

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做些什么吗？比如创建自己的标记符号并对其进行样式设置。

- Shannon Hochkins

---

嗨，你解决这个问题了吗？我也在寻找同样的解决方法。 - Kiran

@Kiran 是的，有人刚刚发布了一个答案！ - Shannon Hochkins

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来演示这个问题。

我已经创建了一个Fiddle来演示这个问题。

- Ian A

---

这很好！但是我想根据绘图数据使用自己的颜色来填充ctx.fillStyle。有什么办法吗？ - iMarh

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页面上找到。

- user1719160