Блог

Как я могу изменить цвета линий с помощью плагина flot и graphTable:

 $('table.statics').graphTable({series: 'columns', position : 
       'replace', height : '180px'});
  

Но я хотел бы изменить цвета в параметрах графической таблицы, что-то вроде:

 $('table.statics').graphTable({series: 'columns', position : 
       'replace', height : '180px', 
       colors: ["#92d5ea", "#666699", "#be1e2d", "#ee8310", "#8d10ee"]});
  

И тогда каждая строка в результирующем flot-графике будет иметь соответствующие цвета из столбца.

В flot вы можете указать цвет для определенной серии:

 //series object
{
  data: rowData,
  label: label,
  color: '#92d5ea'
}
  

Просматривая плагин graphTable, я обнаружил, что такая строка встречается дважды:

 tableData[tableData.length] = { label: label, data: rowData };
  

Именно здесь создается объект series. Таким образом, вам пришлось бы определить свой цвет в этой области, а затем установить его.

РЕДАКТИРОВАТЬ: Если вы хотите иметь возможность задавать его с помощью вызова graphTable, вам придется отредактировать плагин graphTable и добавить colors аргумент в качестве возможности. Вот как:

 //find the line after "var args = {" and add this
colors: null,
  

Затем позже, вместо

 tableData[tableData.length] = { label: label, data: colData };
  

Поместите это:

 var series = {label: label, data: colData };
if (args.colors amp;amp; args.colors[j-args.dataStart]){
    series.color = args.colors[j-args.dataStart]
}
tableData[tableData.length] = series;
  

Обратите внимание, я только показываю, как работать с разделом columns, а не со строками. Теперь вы можете сделать что-то вроде этого:

 $('#table1').graphTable({series: 'columns', colors: ['red','red','blue']});
  

И результат выглядит так (не работает в IE из-за отсутствия исключений).