Question

我正在使用 JQPlot 在网页上绘制图表。我正在用标记点绘制折线图。我想改变标记点的颜色。

我需要每个标记点都有不同的颜色。有可能吗？

提前感谢大家的回复。

这是我的代码：

//In order to use keyboard highlight of the coordinates please click somewhere inside the Result frame.
$(document).ready(function() {
    // Some simple loops to build up data arrays.
    var cosPoints = [];
    for (var i = 0; i < 2 * Math.PI; i += 2) {
        cosPoints.push([i, Math.cos(i)]);
    }

    var plot3 = $.jqplot('chart', [cosPoints], {
        cursor: {
            show: true,
            showTooltip: true,
            showTooltipGridPosition: true,
            //  showTooltipDataPosition: false,
            showTooltipUnitPosition: false,
            useAxesFormatters: false,
            // showVerticalLine : true,
            followMouse: true
        },
        title: 'Line Style Options',
        // Series options are specified as an array of objects, one object
         seriesDefaults: {
              markerRenderer: $.jqplot.MarkerRenderer,
              markerOptions: {

                color: 'red'
            }
         }

    });

    $('#chart').bind('jqplotDataClick', function(ev, seriesIndex, pointIndex, data) {
        alert(data);
    });

    var counter = -1; //to start from the very first on first next click, on prev click it will start from last -- and this is how we want it
    $('#buttonPrev').bind("click", function() {
        counter--;
        DoSomeThing(plot3);
    });

    $('#buttonNext').bind("click", function() {
        counter++;
        DoSomeThing(plot3);
    });

    $(document).keydown(function(e) {
        if (e.keyCode == 37) {
            $('#buttonPrev').click();
        }
        else if (e.keyCode == 39) {
            $('#buttonNext').click();
        }
    });
  function GetColors() {
            var colors = ["red","blue","red","blue"];          
            return colors;
        }
    function DoSomeThing(plot) {
        // *** highlight point in plot ***
        //console.log(" sth "+ plot.series[0].data[1][1]);
        var seriesIndex = 0; //0 as we have just one series
        var data = plot.series[seriesIndex].data;
        if (counter >= data.length) counter = 0;
        else if (counter < 0) counter = data.length - 1;
        var pointIndex = counter;
        var x = plot.axes.xaxis.series_u2p(data[pointIndex][0]);
        var y = plot.axes.yaxis.series_u2p(data[pointIndex][1]);
        console.log("x= " + x + "  y= " + y);
        var r = 5;
        var drawingCanvas = $(".jqplot-highlight-canvas")[0]; //$(".jqplot-series-canvas")[0];
        var context = drawingCanvas.getContext('2d');
        context.clearRect(0, 0, drawingCanvas.width, drawingCanvas.height); //plot.replot();            
        context.strokeStyle = "#000000";
        context.fillStyle = "#FFFF00";
        context.beginPath();
        context.arc(x, y, r, 0, Math.PI * 2, true);
        context.closePath();
        context.stroke();
        context.fill();
    }
});

Answer 1

我不确定您是否可以为单个系列指定多种颜色。要么你可以将你的系列分成几个系列（例如4系列，如果你有4个元素的系列），并使用seriesColors：myColorTab为每个系列指定不同的颜色（因此对于你的每个元素）：

var myColorTab = new Array("#FF0000", "#384763", "#AA4312");
var plot3 = $.jqplot('chart(, [cos1, cos2, cos3], {
  seriesColors : myColorTab
}

请参阅工作示例here

P.S。：你可以改变将数据推入cos1，cos2和cos3的肯定不是最佳的方式。

修改

为了将标记点更改为颜色，您可以为每个系列指定颜色：

series: [ {markerRenderer: $.jqplot.MarkerRenderer, markerOptions: { color: 'red' } }, {markerRenderer: $.jqplot.MarkerRenderer, markerOptions: { color: 'blue' } }, {markerRenderer: $.jqplot.MarkerRenderer, markerOptions: { color: 'green' } } ]

请参阅编辑过的JsFiddle here

Answer 2

只需在代码中 seriesDefaults 上方添加seriesColors: ['#FFC526', '#C0504D', '#4BACC6', '#8064A2', '#9BBB59', '#F79646', '#948A54', '#4000E3'],

Answer 3

我还需要有不同颜色的标记，并且为每种颜色制作单独的系列真的是我的方式，所以我做了这个观点： $ .jqplot.PointRenderer = function（）{ $ .jqplot.LineRenderer.call（本）; };

$.jqplot.PointRenderer.prototype = Object.create($.jqplot.LineRenderer.prototype);
$.jqplot.PointRenderer.prototype.constructor = $.jqplot.PointRenderer;

// called with scope of a series
$.jqplot.PointRenderer.prototype.init = function(options, plot) {
    options = options || {};
    this.renderer.markerOptionsEditor = false;
    $.jqplot.LineRenderer.prototype.init.apply(this, arguments);
    this._type = 'point';
}

// called within scope of series.
$.jqplot.PointRenderer.prototype.draw = function(ctx, gd, options, plot) {
    var i;
    // get a copy of the options, so we don't modify the original object.
    var opts = $.extend(true, {}, options);
    var markerOptions = opts.markerOptions;
    ctx.save();
    if (gd.length) {
        // draw the markers
        for (i=0; i<gd.length; i++) {
            if (gd[i][0] != null && gd[i][1] != null) {
                if (this.renderer.markerOptionsEditor) {
                    markerOptions = $.extend(true, {}, opts.markerOptions);
                    markerOptions = this.renderer.markerOptionsEditor.call(plot, this.data[i], markerOptions);
                }
                this.markerRenderer.draw(gd[i][0], gd[i][1], ctx, markerOptions);
            }
        }
    }

    ctx.restore();
};

绘图功能是LineRenderer绘图功能的精简版本，添加该功能中缺少的部分。

如何在Jqplot中为标记设置单独的颜色

3 个答案: