Флот с осью "Строка" - PullRequest
       20

Флот с осью "Строка"

50 голосов
/ 28 апреля 2011

При использовании flot я хотел бы иметь основанную на строке x-ось.Например, у меня есть список клиентов «Боб», «Крис», «Джо» и я хотел бы отобразить их доход по оси Y.(это гистограмма)

Кажется, на первый взгляд flot поддерживает только числовые типы по оси X.Это правда?

Ответы [ 3 ]

84 голосов
/ 28 апреля 2011

@ Matt близко, но было бы более разумно просто использовать опцию ticks, чтобы напрямую указать, какие галочки должны иметь какие метки:

var options = {

...
  xaxis: {
    ticks: [[0,'Bob'],[1,'Chris'],[2,'Joe']]
  }
...

};

РЕДАКТИРОВАТЬ : похоже, это (я добавил больше данных, чем меток, но вы поняли).

18 голосов
/ 19 декабря 2013

Плагин «Категории» (jquery.flot.categories.js) будет делать это очень хорошо, так что данные могут быть отформатированы так:

var data = [ ["January", 10], ["February", 8], ["March", 4], ["April", 13], ["May", 17], ["June", 9] ];

и сюжет так: enter image description here

См .: http://www.flotcharts.org/flot/examples/categories/index.html

16 голосов
/ 28 апреля 2011

Вы должны быть в состоянии сделать это, используя опцию tickFormatter согласно этому вопросу .Я сам не пробовал, но попробую:

var xAxisLabels = ['Bob', 'Chris', 'Joe'];    
function xAxisLabelGenerator(x){
    return xAxisLabels[x];
}

var plot = $.plot($("#placeholder"), { 
    // snip other options...
    xaxis: {
       transform: xAxisLabelGenerator,
       tickFormatter: xAxisLabelGenerator 
    }
});

Это означает, что фактические значения x должны быть 0, 1, 2, ...

...