如何在Google图表中旋转标签？

Question

我正在使用具有双“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));

这是问题图片： -

Answer 1

材料图表不支持多种选项，包括......

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

参见 - ＆gt; Tracking Issue for Material Chart Feature Parity #2143

建议使用 Core 图表代替......

您可以使用以下选项让外观关闭到材料 ......

theme: 'material'

材料 - ＆gt; google.charts.Bar

核心 - ＆gt; google.visualization.BarChart

编辑

请参阅以下工作代码段...

＆＃13;

＆＃13;

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);
}

＆＃13;

div {
  margin-bottom: 6px;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;