2017-02-16 7 views
0

私はJavaScriptに新しい、私は棒グラフを描画するためにplottable jsを使用しています、棒グラフは大丈夫ですが、x軸ラベルのフォントサイズが大きいです、誰も私はどのようにフォントサイズを減らすのを助けることができますか?ここに私のhtmlとjavascriptのコードです。plottable js棒グラフでフォントサイズを変更するにはどうすればよいですか?

スナップショット: enter image description here

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> 

答えて

1

あなたのX軸ラベルのフォントサイズを変更するには、.plottable .axis textを編集することができますいずれかあなたのplottable.cssファイルのクラスのfont-size属性を(または)追加することもできます。既存のサイズを上書きする独自の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; 
} 

希望!

関連する問題