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 ? Кажется, что граф отображает только последний оператор case. - person scj; 25.05.2014
comment
Где происходит ошибка? Что происходит на этой линии? - person Buck Doyle; 26.05.2014
comment
Проблема решена, небольшая ошибка с моей стороны, где вместо «метки» должно быть «категория». Благодарность! - person scj; 30.05.2014