jqPlot根据id参数自定义标记样式：如何传递参数给渲染器

我有一组jqPlot序列数据，格式为[时间戳, 数值, id]，示例数据如下：

[
    [1679385579000, 8.75, 1],
    [1679386210000, 11.004, 0],
    [1679386218000, 10.018, 2],
    [1679386222000, 10.018, 1]
]

需要根据id参数实现标记的颜色、大小、形状差异化显示，已经使用了jqplot.shapeRenderer，但无法把所需options传递给自定义的customMarkerRenderer函数，自定义函数代码如下：

(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 = 10;
        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 = 20;
        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);

请告知如何将options传递给该自定义函数，并实现根据ID差异化标记样式。

解决方案 #

1. 调整自定义渲染器，支持options传递与ID关联样式 #

修改customMarkerRenderer，使其能存储每个ID对应的样式配置，并在绘制时根据数据点ID读取对应样式：

(function ($) {
    $.jqplot.customMarkerRenderer = function (options) {
        // 默认样式配置，可被外部传入的options覆盖
        this.defaults = {
            markerStyles: {
                0: { size: 8, fillColor: '#FF0000', strokeColor: 'rgba(255,0,0,0.3)', shape: 'circle' },
                1: { size: 12, fillColor: '#F6C528', strokeColor: 'rgba(108,161,93,0.3)', shape: 'circle' },
                2: { size: 10, fillColor: '#00FF00', strokeColor: 'rgba(0,255,0,0.3)', shape: 'square' }
            }
        };
        // 合并默认配置与传入的options
        $.extend(true, this, this.defaults, options);
    };

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

    // 封装不同形状的绘制逻辑，方便扩展
    $.jqplot.customMarkerRenderer.prototype.drawShape = function(ctx, x, y, size, shape) {
        switch(shape) {
            case 'circle':
                ctx.beginPath();
                ctx.arc(x, y, size, 0, Math.PI*2, true);
                ctx.closePath();
                break;
            case 'square':
                ctx.beginPath();
                ctx.rect(x - size, y - size, size*2, size*2);
                ctx.closePath();
                break;
            case 'triangle':
                ctx.beginPath();
                ctx.moveTo(x, y - size);
                ctx.lineTo(x + size, y + size);
                ctx.lineTo(x - size, y + size);
                ctx.closePath();
                break;
        }
    };

    // 扩展draw方法，通过series和index获取当前数据点的ID
    $.jqplot.customMarkerRenderer.prototype.draw = function (ctx, points, options, series, index) {
        // 获取当前数据点的ID
        var dataPoint = series.data[index];
        var id = dataPoint[2];
        // 匹配对应ID的样式，默认用ID=0的样式
        var style = this.markerStyles[id] || this.markerStyles[0];

        ctx.save();

        // 绘制阴影
        ctx.lineWidth = style.size * 0.5;
        ctx.strokeStyle = style.strokeColor;
        this.drawShape(ctx, points[0], points[1], style.size, style.shape);
        ctx.stroke();

        // 绘制标记主体
        ctx.fillStyle = style.fillColor;
        this.drawShape(ctx, points[0], points[1], style.size, style.shape);
        ctx.fill();

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

2. 初始化jqPlot时传递自定义options #

在图表配置中指定标记渲染器为customMarkerRenderer，并通过markerOptions传入自定义样式配置：

$(document).ready(function(){
    var plotData = [
        [1679385579000, 8.75, 1],
        [1679386210000, 11.004, 0],
        [1679386218000, 10.018, 2],
        [1679386222000, 10.018, 1]
    ];

    $.jqplot('chart-container', [plotData], {
        axes: {
            xaxis: {
                renderer: $.jqplot.DateAxisRenderer,
                tickOptions: { formatString: '%H:%M:%S' }
            }
        },
        seriesDefaults: {
            renderer: $.jqplot.LineRenderer,
            // 指定自定义标记渲染器
            markerRenderer: $.jqplot.customMarkerRenderer,
            // 传递自定义样式到渲染器
            markerOptions: {
                markerStyles: {
                    0: { size: 9, fillColor: '#FF6B6B', strokeColor: 'rgba(255,107,107,0.3)', shape: 'circle' },
                    1: { size: 14, fillColor: '#FFD93D', strokeColor: 'rgba(108,161,93,0.3)', shape: 'circle' },
                    2: { size: 11, fillColor: '#6BCB77', strokeColor: 'rgba(107,203,119,0.3)', shape: 'triangle' }
                }
            }
        }
    });
});

关键说明 #

• 渲染器的draw方法新增了series和index参数，通过series.data[index]可获取当前绘制的完整数据点，从而拿到ID值。
• markerOptions中的配置会通过渲染器的构造函数和init方法合并到实例中，在draw阶段直接读取使用。
• drawShape方法封装了不同形状的绘制逻辑，可根据需求扩展更多标记类型。

内容的提问来源于stack exchange，提问作者iMarh