Googleビジュアライゼーションチャートで斜めに目盛りラベルを表示することは可能ですか？

おはよう：Googleビジュアライゼーションチャートで斜めに目盛りラベルを表示することは可能ですか？

棒グラフの目盛りのラベルを斜めに表示したいと思います。それは可能ですか？私のコードは、Googleの簡単なチャートを使用しています。あなたの援助のための

おかげで、ナタリー

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
    <!--Load the AJAX API--> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript"> 

     google.charts.load('current', {'packages':['corechart']}); 

     google.charts.setOnLoadCallback(drawChart); 

     function drawChart() { 

     var data = google.visualization.arrayToDataTable([ 

      ['Topping', 'Slices',], 

      ['Mushrooms', 300], 
      ['Onions', 100], 
      ['Olives', 500], 
      ['Zucchini', 200], 
      ['Pepperoni', 100] 
     ]); 

     var options = {'title':'How Much Pizza I Ate Last Night', 
         'width':400, 
         'height':300, 
         'hAxis':{ 
         ticks: [250, 300,], 
         gridlines: {color: 'blue'}, 
         textStyle:{color: 'blue',} 
         }, 
         }; 

     var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
     } 
    </script> 
    </head> 

    <body> 
    <div id="chart_div"></div> 
    </body> 
</html>

出典

2016-05-06 Natalie

あなたが特定の角度が必要な場合だけ、次の例を参照してくださいslantedTextAngle: number

を使用し、お使いのコンフィギュレーションオプション

にslantedText: trueを追加...

google.charts.load('current', { 
 
    callback: function() { 
 
    new google.visualization.BarChart(document.getElementById('chart_div')).draw(
 
     google.visualization.arrayToDataTable([ 
 
     ['Topping', 'Slices',], 
 
     ['Mushrooms', 300], 
 
     ['Onions', 100], 
 
     ['Olives', 500], 
 
     ['Zucchini', 200], 
 
     ['Pepperoni', 100] 
 
     ]), 
 
     { 
 
     title: 'How Much Pizza I Ate Last Night', 
 
     width: 400, 
 
     height: 300, 
 
     hAxis: { 
 
      ticks: [250, 300], 
 
      gridlines: {color: 'blue'}, 
 
      // slant hAxis labels 
 
      slantedText: true, 
 
      slantedTextAngle: 33, 
 
      textStyle: {color: 'blue'} 
 
     } 
 
     } 
 
    ); 
 
    }, 
 
    packages:['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

出典

2016-05-06 14:45:50 WhiteHat

Perfect again WhiteHat。ありがとう。私は見て、この答えのGoogleのドキュメントの全体を見て、それを見つけることができませんでした。あなたが私に指示できるすべての「選択肢」の可能性を特定する文書はありますか？ – Natalie

残念ながら、それらをすべて表示するページは1つもないので、[LineChart]（https://developers.google.com/chart/interactive/docs/gallery/linechart）の設定オプションに 'slanted'オプションがリストされています＃configuration-options） - それは一番多いようです - 私は通常それをチェックするか、[ColumnChart]（https://developers.google.com/chart/interactive/docs/gallery/columnchart#configuration-options） – WhiteHat

Googleビジュアライゼーションチャートで斜めに目盛りラベルを表示することは可能ですか？

答えて

関連する問題