플로트에서 눈금 레이블 크기를 어떻게 제어합니까?

StackOverflow https://stackoverflow.com/questions/459947

  •  19-08-2019
  •  | 
  •  

문제

나는 플로트(상태당 %를 표시하는 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가 가능한가요?

도움이 되었습니까?

해결책

API를 통해 글꼴 크기를 설정할 수는 없지만 CSS를 사용하여 눈금 레이블의 크기를 설정할 수는 있습니다.

.tickLabel { font-size: 80% }

다른 팁

다음은 API에서 직접 가져온 예입니다.

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

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

위의 두 답변은 더 이상 '실제' 텍스트를 사용하지 않으므로(대신 텍스트가 그려짐) 최신 버전의 flot에서는 작동하지 않습니다.대신 다음 옵션을 지정하십시오.

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

(바꾸다 some_number 원하는 사이즈로 포인트 단위로)

나는 다음을 사용했습니다 :

CSS 파일/SCSS 파일

#graph_label .tickLabel{

     font-size: 50%;
  }

Index.html 또는 그래프 영역을 그리는 장소

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

참조:위의 @BrentM의 답변

추신:0.8.1 이전의 Flot 버전을 사용하고 있으므로 최신 버전이 어떻게 작동할지 전혀 모릅니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top