Flot图表:图例和字体

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。