javascript - 如何更改plottable js条形图中的字体大小？

Question

我是javascript新手，我正在使用plottable js绘制条形图，条形图很好，但是x轴标签的字体大小很大，有人可以帮助我如何减小字体大小吗？这是我的 html 和 javascript 代码。

快照:

HTML 代码:

<svg height="200px" width="400px" style="margin-left:auto; margin-right:auto; display:block;" id="Individual-assessment-score-graph">
</svg>

js代码:

<script>
        var data = [
            <% for(var i=0; i < studentData.pageInclination.assessmentScoreChart.length; i++) {%>
                { 
                    testScore: <%= studentData.pageInclination.assessmentScoreChart[i].testScore %>,
                    barColor: <%= studentData.pageInclination.assessmentScoreChart[i].barColor %>,
                    chartLegend: "<%= studentData.pageInclination.assessmentScoreChart[i].chartLegend %>"
                 },
            <%}%>
            ];
        var colors = [
        <% for(var i=0; i < studentData.pageInclination.chartBarColors.length; i++) {%>
                "<%= studentData.pageInclination.chartBarColors[i] %>",
            <%}%>
        ];


        var colorScale = new Plottable.Scales.Color();
            colorScale.range(colors);

        var dataSet = new Plottable.Dataset(data);
        var xAccessor = function(datum, index, dataset) {
            return datum.chartLegend;
            };            
        var xScale = new Plottable.Scales.Category(); 


        var yScale = new Plottable.Scales.Linear();
        var yAccessor = function(datum, index, dataset) {
            return datum.testScore;
        };

        var plot = new Plottable.Plots.Bar();
        plot.addDataset(dataSet);
        plot.x(xAccessor, xScale);
        var xAxis = new Plottable.Axes.Category(xScale, "bottom");
        var yAxis = new Plottable.Axes.Numeric(yScale, "left");
        var chart = new Plottable.Components.Table([
            [yAxis, plot],
            [null, xAxis]
        ]);

        chart.renderTo("svg#Individual-assessment-score-graph");
</script>

Answer 1

要更改 X 轴标签的字体大小，您可以在 plottable 中编辑 .plottable .axis text 类的 font-size 属性.css 文件，(或者)您甚至可以添加相同的类到您自己的 css 文件中以覆盖现有的大小。

.plottable .axis text 类将如下所示(在您的 plottable.css 文件中，

.plottable .axis text {
  fill: #32313F;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 12px; // => Change this value according to your need
  font-weight: 200;
  line-height: normal;
}

希望这有帮助!