Как установить индивидуальный цвет для маркера в Jqplot

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

PS : Вы можете изменить не оптимальный способ передачи данных в cos1, cos2 и cos3.

EDIT

Для того, чтобы изменить markerpoints обратно цвет, вы можете указать цвет для каждой серии:

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

Пожалуйста, смотрите отредактированный JsFiddle here

Answer 2

Just Add seriesColors: ['#FFC526', '#C0504D', '#4BACC6', '#8064A2', '#9BBB59', '#F79646', '#948A54', '#4000E3'], выше seriesDefaults в вашем коде

Answer 3

Мне также нужно было иметь разные цветные маркеры, а отдельные серии для каждого цвета действительно были для меня, поэтому я сделал это pointRenderer: $ .jqplot.PointRenderer = function() { $ .jqplot.LineRenderer. называть (это); };

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

Функция ничьей - это урезанная версия функции DrawRenderer LineRenderer, добавляющая недостающие части от этой функции.