1

我正在使用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();
    }
});
4

3 回答 3

1

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

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

请在此处查看工作示例

PS：您可以更改将数据推送到 cos1、cos2 和 cos3 的肯定不是最佳方式。

编辑

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

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

请在此处查看已编辑的 JsFiddle

于 2013-10-14T12:02:57.377 回答
0

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

于 2013-10-14T12:51:23.463 回答
0

我还需要有不同颜色的标记，并为每种颜色制作单独的系列真的适合我，所以我做了这个 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();
};

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

于 2015-04-17T18:16:53.917 回答