jqplot - задайте персонализиран цвят за лентови диаграми въз основа на името на етикета

Имам основно приложение, което динамично изобразява множество лентови диаграми с различни набори от данни и няма начин да разбера кое име на етикет ще се покаже. Например, ако ми е даден набор от етикети: „ягода“, „ванилия“, „шоколад“, бих искал да задам цвета за „ягода“ на розово всеки път, когато тази категория се показва в графика.

Има ли начин да зададете конкретен цвят на лента въз основа на нейната стойност на етикета?

Ето текущия ми код:

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'
}      
});

backbone.js jqplot
person scj    schedule 25.05.2014    source източник
comment
Не изглежда, че jqPlot поддържа това, но изглежда вероятно, че има начин да хванете имената на етикетите някъде във вашия Backbone код и да добавите персонализирани цветове въз основа на етикетите. Трудно е да се каже, без да се види кодът, където изграждате сюжета.   -  person Buck Doyle    schedule 25.05.2014
comment
Благодаря Бък, кодът ми вече е готов. Може би логиката трябва да се постави в customSeriesColors под renderPlot и след това да се предаде на seriesColors (също под свойството renderPlot)?   -  person scj    schedule 25.05.2014

Отговори (1)


arrow_upward
0
arrow_downward

След като имате достъп до вашите етикети, когато чертаете, защо просто не дефинирате цветовете и там?

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 е отворен въпрос; ако можете да имате етикети, които не отговарят на предварително дефинирания списък, ще трябва да изберете от списък с алтернативи.

person Buck Doyle    schedule 25.05.2014
comment
Благодаря много. Кодът обаче е на мястото си, бихте ли случайно знаели защо това се регистрира в моята конзола: Uncaught TypeError: Cannot read property 'search' of undefined? Изглежда, че графиката изобразява само последния случай. - person scj; 25.05.2014
comment
Къде възниква грешката? Какво се случва на тази линия? - person Buck Doyle; 26.05.2014
comment
Проблемът е решен, малка грешка от моя страна, където „етикет“ трябва да бъде „категория“ вместо това. Благодаря! - person scj; 30.05.2014