jqplot - 레이블 이름을 기준으로 막 대형 차트의 사용자 정의 색 설정

Question

다른 데이터 세트로 여러 막 대형 차트를 동적으로 렌더링하는 백본 응용 프로그램이 있는데 표시 할 레이블 이름을 알 수있는 방법이 없습니다. 예를 들어, "strawberry", "vanilla", "chocolate"이라는 레이블 집합이 있으면 해당 범주가 그래프로 나타날 때마다 "strawberry"의 색을 분홍색으로 설정하고 싶습니다.

라벨 값에 따라 막대에 특정 색상을 설정하는 방법이 있습니까? 여기

내 현재 코드입니다 :

collectCategories: function(aggregates) { 
    var categories = {}; 
    _.each(aggregates, function(aggregate) { 
    for (var category in aggregate) { 
    categories[category] = true; 
    } 
}); 
    categories = _.keys(categories); 
    categories.sort(); 
    return categories; 
}, 

render: function() { 
    var container = this.$el; 
    container.empty(); 

    var aggregates = this.collection.map(function(purchase) {  
    return purchase.aggregates(); 
    }); 

var categories = this.collectCategories(aggregates); 

var datasets = _.map(categories, function(category) { 
var row = _.map(aggregates, function(aggregate) { 
    var qtyInCategory = aggregate[category]; 
    return qtyInCategory ? qtyInCategory : 0;   
}); 
    return row;   
}); 

var labels = this.collection.map(function(purchase) { 
    return purchase.get('purchase_date').substr(0, 10); 
}); 

if (datasets.length > 0) { 
    this.renderPlot(datasets, labels, categories); 
} 
return this; 
}, 

renderPlot: function(datasets, labels, categories) { 
var seriesLabels = _.map(categories, function(category) { 
    return { label: category}; 
}); 

var customSeriesColors = 

var plot = $.jqplot('bar-charts-container', datasets, { 
    stackSeries: true, 
    captureRightClick: true, 
    seriesDefaults:{ 
    renderer:$.jqplot.BarRenderer, 
    rendererOptions: { 
     barMargin: 30, 
     varyBarColor: true 
    }, 
    pointLabels: {   
     show: false 
    } 
    }, 

series: seriesLabels, 

seriesColors: 

axes: { 
    xaxis: { 
     renderer: $.jqplot.CategoryAxisRenderer, 
     ticks: labels 
    }, 
    yaxis: { 
    padMin: 0 
    } 
}, 

legend: { 
    show: true, 
    location: 'e', 
    placement: 'outside' 
}  
}); 

Answer 1

당신은 음모, 왜 너무 거기에 색상을 정의 할 때 레이블에 액세스 할 수 있기 때문에? 다른 곳에서 객체의

seriesColors: colorsForLabels(seriesLabels) 

:

colorsForLabels: function(labels) { 
    return _.map(labels, function(labelObj) { 
    switch (labelObj.label) { 
     case 'strawberry': 
     return 'pink'; 
     case: 'vanilla': 
     return 'white'; 
     default: 
     # return a random colour from a list 
    } 
    }); 
} 

default는 의문이다; 에 미리 정의 된 목록과 일치하지 않는 레이블이 있으면 대체 목록에서 선택해야합니다.