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

I am using JQPlot to plot a chart on a page. I am plotting Line chart with marker points. I want to change the color of the marker points.

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

I need each marker point to be in different color. Is it possible?

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

Thank you all in advance for your response.

提前谢谢大家的回复。

Here is my code :

这是我的代码：

//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();
    }
});

3 个解决方案

#1

I'm not sure you can specify multiple colors for a single serie. Either you can divide your serie into several series (ex. 4 series if you have a serie of 4 elements), and use seriesColors : myColorTab to specify different color for each series (thus for each of your elements) :

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

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

Please see working example here

请在此处查看工作示例

P.S. : You can change the surely not-optimal way to push datas into cos1, cos2 and cos3.

附： ：您可以更改将数据推入cos1，cos2和cos3的绝对非最佳方式。

EDIT

编辑

In order to change markerpoints back color, you can specify a color for each series :

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

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

Please see edited JsFiddle here

请在这里查看编辑过的JsFiddle

#2

Just Add seriesColors: ['#FFC526', '#C0504D', '#4BACC6', '#8064A2', '#9BBB59', '#F79646', '#948A54', '#4000E3'], above seriesDefaults in your code

只需添加seriesColors：['＃FFC526'，'＃C0504D'，'＃4BACC6'，'＃8064A2'，'＃9BBB59'，'＃F79646'，'＃948A54'，'＃4000E3']，上面的系列默认你的码

#3

I also needed to have different colored markers, and making separate series for each color really the way to go for me, so i made this pointRenderer: $.jqplot.PointRenderer = function(){ $.jqplot.LineRenderer.call(this); };

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

$.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();
};

The draw function is a stripped down version of the LineRenderer draw function, add the missing pieces from that function.

draw函数是LineRenderer绘制函数的精简版本，添加该函数中缺少的部分。