Как я могу контролировать размер метки тика в flot - PullRequest
Новая
       23

Как я могу контролировать размер метки тика в flot

9 голосов
/ 20 января 2009

У меня есть базовая гистограмма, которую я представляю во флоте (5 баров, отображающих% за статус). 

$.plot($("#placeholder"), [
    {
        label: 'Failed',
        data: [[0,10]],
        bars: { show: true }
    },
    {
        label: 'Passed',
        data: [[1,15]],
        bars: { show: true }
    },
    {
        label: 'Not Run',
        data: [[2,30]],
        bars: { show: true }
    },
    {
        label: 'Blocked',
        data: [[3,5]],
        bars: { show: true }
    },
    {
        label: 'In Progress',
        data: [[4,40]],
        bars: { show: true }
    }
],
{
    xaxis: {
        ticks: [[0.5, "Failed"], [1.5, "Passed"], [2.5, "Not Run"], [3.5, "Blocked"], [4.5, "In Progress"]]
    },
    legend: {
        show: false
    }
});

Я считаю, что шрифт, используемый для значений тиков на оси x, слишком велик, особенно когда график отображается в небольших измерениях, т.е. 240x100. Я прочитал документацию по API, но не могу найти способ управления размерами меток.

Возможно ли это OOTB?

Ответы [ 4 ]

18 голосов
/ 20 марта 2009

Не похоже, что вы можете установить размер шрифта через API, но вы можете использовать css для установки размера меток. 

.tickLabel { font-size: 80% }
10 голосов
/ 13 июля 2012

Вот пример непосредственно из API: 

xaxis:{
   font:{
      size:11,
      style:"italic",
      weight:"bold",
      family:"sans-serif",
      variant:"small-caps"
   }
}

http://flot.googlecode.com/svn/trunk/API.txt

6 голосов
/ 08 декабря 2011

Приведенные выше два ответа не будут работать в последней версии flot, так как они больше не используют «реальный» текст (вместо этого текст рисуется). Вместо этого укажите эти параметры:

{xaxis: {font: size: some_number}, yaxis: {font: size: some_number}}

(замените some_number на нужный размер в пунктах)

1 голос
/ 13 июня 2013

Я использовал следующее:

Файл CSS / Файл SCSS 

#graph_label .tickLabel{

     font-size: 50%;
  }

Index.html или место, где вы строите область графика 

$.plot($("graph_label"), [dataArrayReference], options);

Ссылка: ответ @BrentM выше

PS: я использую Flot Version до 0.8.1, поэтому я не имею представления о том, как будет работать последняя версия

...