jqplot과 누적 가로 막 대형 차트를 사용하여 특정 막대의 색상을 변경하는 방법

Question

한 가지 확실한 질문이 있습니다. 어떤 방식 으로든 스택 막대 차트의 한 막대의 색상을 변경할 수 있습니까 (jqplot 옵션을 사용하거나 해킹에 의존)? 이미 나는 누적 막 대형 차트의 3 개 가지 색상을 사용하고 가정 할 수있다 그래서

:

내가이 원하는 :

나는이 있습니다

seriesColors: ['#afafaf', '#c4c6c4', '#dbdcdd'] 

문제가 없습니다. hat 특정 막대 하나에 특정 색상을 하나 추가하고 싶습니다.

$(document).ready(
    function() { 

     var el = [ 3, 6, 0, 10, 12 ]; 
     var ael = [ 14, 5, 0, 4, 2 ]; 
     var ipv = [ 4, 9, 0, 8, 4 ]; 
     var months = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May' ]; 
     var colors = ['blue', 'red', 'white']; 

     plot3 = $.jqplot('elDiagram', [ el, ael, ipv ], { 
      stackSeries : true, 
      seriesColors: colors, 
      captureRightClick : true, 
      seriesDefaults : { 
       renderer : $.jqplot.BarRenderer, 
       rendererOptions : { 
        barMargin : 30, 
        varyBarColor : true, 
        highlightMouseDown : true, 
        barWidth: 60 
       }, 
       pointLabels : { 
        show : true 
       } 
      }, 
      axes : { 
       xaxis : { 
        renderer : $.jqplot.CategoryAxisRenderer, 
        ticks : months, 
        tickOptions : { 
         mark : 'outside' 
        } 
       }, 
       yaxis : { 
        tickOptions : { 
         show : false 
        }, 
        padMin : 0 
       } 
      }, 
      series : [ { 
       label : 'bla1' 
      }, { 
       label : 'bla2' 
      }, { 
       label : 'bla3' 
      } ], 
      legend : { 
       show : true, 
       location : 'ne', 
       placement : 'inside' 
      } 
     });  
    }); 

감사 :

다음은 JS 코드입니다!

Answer 1

OK,이 솔루션은 내가 보여주고 여기에 설명 할 것이다 해킹했다 :

1. 당신은 라인의 일부를 $ .jqplot.BarRenderer.prototype.draw 호출 한 함수를 덮어 변경해야
2. 당신은 getStart 당신은 라인의 일부를 $ .jqplot.ShapeRenderer.prototype.draw 호출 한 함수를 덮어 변경해야
3. (sidx, didx, 완, 플롯, 축)라는 기능을 덮어 쓸 필요가

1 .:

필자는 i 및 pos 매개 변수를 함수에 추가 한 방식으로 줄을 변경했습니다. 그 이유는 막대의 현재 막대와 위치를 나타내는 것이 었습니다.

2 :

function getStart(sidx, didx, comp, plot, axis) { 
    // check if sign change 
    var seriesIndex = sidx, prevSeriesIndex = sidx - 1, start, prevVal, aidx = (axis === 'x') ? 0 : 1; 
    // is this not the first series? 
    if (seriesIndex > 0) { 
     prevVal = plot.series[prevSeriesIndex]._plotData[didx][aidx]; 
     // is there a sign change 
     if ((comp * prevVal) < 0) { 
      start = getStart(prevSeriesIndex, didx, comp, plot, axis); 
     } 
     // no sign change. 
     else { 
      start = plot.series[prevSeriesIndex].gridData[didx][aidx]; 
     } 
    } 
    // if first series, return value at 0 
    else { 
     start = (aidx === 0) ? plot.series[seriesIndex]._xaxis.series_u2p(0) : plot.series[seriesIndex]._yaxis.series_u2p(0); 
    } 
    return start; 
} 

아무 것도 여기에 변경되지 않습니다. 새 덮어 쓴 함수가 jQPlot 라이브러리에서 사용할 수 없기 때문에 함수를 복사하면됩니다.

$.jqplot.ShapeRenderer.prototype.draw = function(ctx, points, options, currentBar, position) { 
    ctx.save(); 
    var opts = (options != null) ? options : {}; 
    var fill = (opts.fill != null) ? opts.fill : this.fill; 
    var closePath = (opts.closePath != null) ? opts.closePath : this.closePath; 
    var fillRect = (opts.fillRect != null) ? opts.fillRect : this.fillRect; 
    var strokeRect = (opts.strokeRect != null) ? opts.strokeRect 
      : this.strokeRect; 
    var clearRect = (opts.clearRect != null) ? opts.clearRect : this.clearRect; 
    var isarc = (opts.isarc != null) ? opts.isarc : this.isarc; 
    var linePattern = (opts.linePattern != null) ? opts.linePattern 
      : this.linePattern; 
    var ctxPattern = $.jqplot.LinePattern(ctx, linePattern); 
    ctx.lineWidth = opts.lineWidth || this.lineWidth; 
    ctx.lineJoin = opts.lineJoin || this.lineJoin; 
    ctx.lineCap = opts.lineCap || this.lineCap; 
    ctx.strokeStyle = (opts.strokeStyle || opts.color) || this.strokeStyle; 
    ctx.fillStyle = opts.fillStyle || this.fillStyle; 
    if (currentBar == activeColumn && position == 0) { // adding different color for the specific bar 
     ctx.fillStyle = defaultColors[0]; 
    } else if (currentBar == activeColumn && position == 1) { 
     ctx.fillStyle = defaultColors[1]; 
    } else if (currentBar == activeColumn && position == 2) { 
     ctx.fillStyle = defaultColors[2]; 
    } 
    ctx.beginPath(); 
    if (isarc) { 
     ctx.arc(points[0], points[1], points[2], points[3], points[4], true); 
     if (closePath) { 
      ctx.closePath(); 
     } 
     if (fill) { 
      ctx.fill(); 
     } else { 
      ctx.stroke(); 
     } 
     ctx.restore(); 
     return; 
    } else if (clearRect) { 
     ctx.clearRect(points[0], points[1], points[2], points[3]); 
     ctx.restore(); 
     return; 
    } else if (fillRect || strokeRect) { 
     if (fillRect) { 
      ctx.fillRect(points[0], points[1], points[2], points[3]); 
     } 
     if (strokeRect) { 
      ctx.strokeRect(points[0], points[1], points[2], points[3]); 
      ctx.restore(); 
      return; 
     } 
    } else if (points && points.length) { 
     var move = true; 
     for (var i = 0; i < points.length; i++) { 
      // skip to the first non-null point and move to it. 
      if (points[i][0] != null && points[i][1] != null) { 
       if (move) { 
        ctxPattern.moveTo(points[i][0], points[i][1]); 
        move = false; 
       } else { 
        ctxPattern.lineTo(points[i][0], points[i][1]); 
       } 
      } else { 
       move = true; 
      } 
     } 
     if (closePath) { 
      ctxPattern.closePath(); 
     } 
     if (fill) { 
      ctx.fill(); 
     } else { 
      ctx.stroke(); 
     } 
    } 
    ctx.restore(); 
}; 

3 :

은 여기 바 당신의 현재에서이 기본입니다 여부를 확인해야합니다. 코드의 중요한 부분이다 : 그 줄에 대한 3 개 가지 색상을 추가

if (currentBar == activeColumn && position == 0) { // adding different color for the specific bar 
    ctx.fillStyle = defaultColors[0]; 
} else if (currentBar == activeColumn && position == 1) { 
    ctx.fillStyle = defaultColors[1]; 
} else if (currentBar == activeColumn && position == 2) { 
    ctx.fillStyle = defaultColors[2]; 
} 

단지