Googleグラフのラベルをどのように回転させますか？

Question

私は二重の「y軸」を持ち、ラベルを回転させたいGoogleの縦棒グラフを使用しています。私もhAxis:{slantedText: true}を試しましたが、効果はありませんでしたが、は、y-axisという単一のグラフがあるところで働いていました。

はここに私のコードです： -

var data = new google.visualization.arrayToDataTable(loadStageLeadGraphData); 
       var options = { 

        series: { 
         0: { 
          axis: 'distance' 
         }, // Bind series 0 to an axis named 'distance'. 
         1: { 
          axis: 'brightness' 
         } // Bind series 1 to an axis named 'brightness'. 
        }, 
        chartArea: { 
         top: 55, 
         height: '40%' 
        }, 
        axes: { 
         y: { 
          distance: { 
           label: 'Leads' 
          }, // Left y-axis. 
          brightness: { 
           side: 'right', 
           label: 'Value (INR)' 
          } // Right y-axis. 
         } 
        }, 
        vAxis: { format: 'decimal' }, 
        hAxis: { 
         slantedText: true, 
        }, 
        colors: ['#CBD570', '#FCC100'] 
       }; 

       var chart = new google.charts.Bar(document.getElementById('Lead_stage')); 
       chart.draw(data, google.charts.Bar.convertOptions(options)); 

ここで問題の画像： - 含む素材チャート、でサポートされていないいくつかのオプションがあります

Answer 1

...

{hAxis,vAxis,hAxes.*,vAxes.*}.slantedText

は見る - >Tracking Issue for Material Chart Feature Parity #2143

が

あなたは外観を得るために、次のオプションを使用して近い ...材質に感じることができます...代わりにコアチャートを使用することをお勧めし

theme: 'material' 

---

材質 - >google.charts.Bar

コア - >google.visualization.BarChart

---

EDIT

は、作業スニペット以下を参照してください...

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

 
function drawChart() { 
 
    var data = new google.visualization.arrayToDataTable([ 
 
    ['Lead Stages', 'Leads', 'Value (INR)'], 
 
    ['Business Requirements', 12, 1600000], 
 
    ['Other Category', 3, 1200000], 
 
    ['Prospect', 1, 50000], 
 
    ['In Negotiation', 1, 100000], 
 
    ['Testing Phase', 4, 1000000] 
 
    ]); 
 

 
    var options_m = { 
 
    series: { 
 
     0: { 
 
     axis: 'distance' 
 
     }, 
 
     1: { 
 
     axis: 'brightness' 
 
     } 
 
    }, 
 
    chartArea: { 
 
     top: 55, 
 
     height: '40%' 
 
    }, 
 
    axes: { 
 
     y: { 
 
     distance: { 
 
      label: 'Leads' 
 
     }, 
 
     brightness: { 
 
      side: 'right', 
 
      label: 'Value (INR)' 
 
     } 
 
     } 
 
    }, 
 
    vAxis: { 
 
     format: 'decimal' 
 
    }, 
 
    hAxis: { 
 
     slantedText: true, 
 
    }, 
 
    width: 600, 
 
    height: 300, 
 
    colors: ['#CBD570', '#FCC100'] 
 
    }; 
 

 
    var chart_m = new google.charts.Bar(document.getElementById('chart_div_m')); 
 
    chart_m.draw(data, google.charts.Bar.convertOptions(options_m)); 
 

 
    var options_c = { 
 
    series: { 
 
     0: { 
 
     targetAxisIndex: 0 
 
     }, 
 
     1: { 
 
     targetAxisIndex: 1 
 
     } 
 
    }, 
 
    chartArea: { 
 
     bottom: 84, 
 
     top: 55, 
 
     height: '40%' 
 
    }, 
 
    vAxes: { 
 
     0: { 
 
     title: data.getColumnLabel(1) 
 
     }, 
 
     1: { 
 
     title: data.getColumnLabel(2) 
 
     } 
 
    }, 
 
    vAxis: { 
 
     format: 'decimal' 
 
    }, 
 
    hAxis: { 
 
     slantedText: true, 
 
    }, 
 
    width: 600, 
 
    height: 300, 
 
    colors: ['#CBD570', '#FCC100'], 
 
    theme: 'material' 
 
    }; 
 

 
    var chart_c = new google.visualization.ColumnChart(document.getElementById('chart_div_c')); 
 
    chart_c.draw(data, options_c); 
 
}

div { 
 
    margin-bottom: 6px; 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div>Material</div> 
 
<div id="chart_div_m"></div> 
 
<div>Core</div> 
 
<div id="chart_div_c"></div>