javascript - 如何在谷歌图表中旋转标签？

Question

我正在使用具有双“y 轴”的 google 柱形图并想旋转它的标签。我也尝试过 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

Material 图表不支持多个选项，包括...

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

参见 --> Tracking Issue for Material Chart Feature Parity #2143

建议改用核心图表...

您可以使用以下选项让外观和感觉接近 Material ...

theme: 'material'

---

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>