当前位置:  开发笔记 > 编程语言 > 正文

如何控制flot中的刻度标签大小

如何解决《如何控制flot中的刻度标签大小》经验,为你挑选了3个好方法。

我有一个我用flot呈现的基本条形图(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吗?



1> 小智..:

您似乎无法通过API设置字体大小,但您可以使用css来设置刻度标签的大小.

.tickLabel { font-size: 80% }



2> 小智..:

以下是直接来自API的示例:

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

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



3> Joel Cross..:

以上两个答案不适用于最新版本的flot,因为它们不再使用"真实"文本(而是绘制文本).而是指定以下选项:

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

(some_number以点数替换所需的大小)

推荐阅读
有风吹过best
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有