2014-12-30 2 views
2

Я использую c3js для создания диаграммы с данными строки и хочу использовать определенные цвета.Данные строки C3js, пользовательские цвета

var chart = c3.generate({ 
    data: { 
     x:'x', 
     rows: [ 
      ['x','Winter 2007-2008','Winter 2008-2009','Winter 2009-2010'], 
      ['2013-01-01',12,30,3], 
      ['2013-01-02',123,200,22], 
      ['2013-01-03',21,100,54], 
      ['2013-01-04',32,400,23], 
      ['2013-01-05',12,150,12], 
      ['2013-01-06',34,250,15] 
     ], 
    }, 
    axis: { 
     x: { 
      type: 'timeseries', 
      tick: { 
       format: '%Y-%m-%d' 
      } 
     } 
    } 
}); 

Это все хорошо, за исключением того, что я хочу установить каждую линию как пользовательский цвет.

С данными столбца, this is simple:

data: { 
    x:'x', 
    columns:[[]] 
}, 
color: { 
     pattern: ['#1f77b4', '#aec7e8', '#ff7f0e'] 
} 

это может быть достигнуто с данными строки-ориентированной?

ответ

6

настраивая функцию цвета на графике, как показано ниже Try: -

color: function (color, d) { 
     // d will be 'id' when called for legends 
     var colors = {   // Mapping for dataseries to color code. 
      'Winter 2007-2008': '#ff0000', 
      'Winter 2008-2009':'#00ff00', 
      'Winter 2009-2010':'#0000ff' 
     }; 
     if(typeof d === 'object') { 
      return colors[d.id]; 
     }else { 
      return colors[d]; 
     } 
     //return d.id && d.id === 'data3' ? d3.rgb(color).darker(d.value/150) : color; 
    } 

Рабочий пример: - jsFiddle

+1

Спасибо, что разместили это. Все остальные примеры, которые я нашел, не применимы к моему сценарию. –

0

Цвет рисунок должен работать:

color: {pattern: ['#ff0000','#00ff00','#0000ff']}, 

JsFiddle.

Смежные вопросы