Question

我使用jQuery Flot库配置了条形图。这是代码：

<style>
.flot-chart-bar {
    height: 300px;
}
.flc-bar {
    font-size: 2px;
    border: 1px grey solid;

}

<div class="card profilestats" style="color: #fff !important;">
<div class="card-content" style="background-color: #bdbdbd !important;min-height:320px;">

    <div id="bar-tipoReclamo" class="flot-chart-bar"></div>
    <br>
    <div class="flc-bar" style="background-color: white; "></div>                        

</div>  
<div class="card-action" style="background-color: #757575 !important;;">
    <span>Distribuzione Tipi di Reclamo negli ultimi 3 anni</span>
</div>

这就是吧：

        $.plot($("#bar-tipoReclamo"), barData, {
                series: {
                    bars: {
                        show: true,
                        barWidth: 0.13,
                        order: 1
                    }
                },
                valueLabels: {
                    show: true
                },
                xaxis: {
                     ticks: [[0,currentYear-2],[1,currentYear-1],[2,currentYear]]
                },
                legend: {
                    container: '.flc-bar',
                    noColumns: 0,
                    backgroundColor: "white",
                    lineWidth: 0
                },
                grid: {
                    hoverable: true,
                    clickable: true
                },
                tooltip: true,
                tooltipOpts: {
                 content: " %y,%s  " ,
                    shifts: {
                        x: 20,
                        y: 0
                    },
                    defaultTheme: false
                }
            });

现在问题很简单：如何减少图例中单词的字体大小？我已经尝试过使用CSS并使用我在网上找到的一些Legend属性，但似乎没什么用。

Bar with Legend

我想减少条形下白色图例中字词的字体。

Answer 1

你应该使用的CSS，但font-size: 2px;可能不是你想要的。有关基于代码的完整示例，请参阅此fiddle，其中CSS中指定了font-size。

Flot chart：图例和字体

1 个答案: