在Flot条形图上更改font-family

Question

问题

在Flot的条形图上方出现的数字很小，我认为是使用画布绘制的。因此，我很难尝试更改它以匹配我的x和y轴上的标签样式。

scripts.js中

<script type="text/JavaScript">

    var d1 = [
            [2013, {{ school.apr_2013 }}],
            [2014, {{ school.apr_2014 }}],
            [2015, {{ school.apr_2015 }}],
            [2016, {{ school.apr_2016 }}]
            ];

    $(document).ready(function() {
        aprPlot = $.plot($("#apr-chart"), [d1], {
            series: {
                bars: {
                    show: true,
                    fill: true,
                    // Determines the color of the bar in the chart
                    fillColor: '#c62828',
                    barWidth: 0.5,
                    align: "center"
                },
                valueLabels: { show: true },
                color: "#c62828"
            },
            xaxis: {
                min: 2012.5,
                max: 2016.5,
                ticks: 
                [[2013, '2013'],
                [2014, '2014'],
                [2015, '2015'],
                [2016, '2016']]},
            yaxis: {
                min: 0,
                max: 105,
                tickSize: 10
            },
            grid: {
                borderWidth: 0.5,
                borderColor: 'AAA',
                color: '#AAA',
                labelMargin: 10
            }
        });
        // Add data value labels at top of bar
        var ctx = aprPlot.getCanvas().getContext("2d");
        var data = aprPlot.getData()[0].data;
        var xaxis = aprPlot.getXAxes()[0];
        var yaxis = aprPlot.getYAxes()[0];
        var offset = aprPlot.getPlotOffset();

        for (var i = 0; i < data.length; i++){
            var text = data[i][1] + '';
            var metrics = ctx.measureText(text);
            var xPos = (xaxis.p2c(data[i][0])+offset.left) - metrics.width/2;
            var yPos = yaxis.p2c(data[i][1]) + offset.top - 5;
            ctx.fillText(text, xPos, yPos);
        }
    });
</script>

style.scss

.flot-text {
    font-family: "Lato", sans-serif;
    color: $color-black !important;
    font-size: 12px !important;
}

Answer 1

您可以在绘制文本之前设置画布的字体样式：

ctx.font = '12px Lato';
ctx.fillText(text, xPos, yPos);