如何在谷歌圖表中旋轉標籤？

我使用的是具有雙「y軸」並想旋轉其標籤的谷歌柱狀圖。我也嘗試hAxis:{slantedText: true}，但不起作用，然而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));

這是問題的圖像： -

來源

2017-05-15 user7104874

有不受材料圖表，其中包括支持多個選項...

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

看到 - >Tracking Issue for Material Chart Feature Parity #2143

建議使用核心圖表，而不是...

您可以使用下面的選項獲得的外觀和感覺接近到材料 ...

theme: 'material'

材料 - >google.charts.Bar

核心 - >google.visualization.BarChart

編輯

看到下面的工作片段...

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>

來源

2017-05-15 11:28:03 WhiteHat

但雙Y軸不受'材料'支持...... – user7104874

不確定我是否遵循評論 - 雙y軸__are ___由_Material_和_Core_圖表支持___，請參閱__EDIT__以上... – WhiteHat

如何在谷歌圖表中旋轉標籤？

回答

相關問題