Question

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

快照：

HTML code：

<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 .axis text文件中的font-size classe plottable.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;
}

希望这有帮助！

如何在plottable js条形图中更改字体大小？

1 个答案: