Google图表会减少Y轴标签的宽度

时间:2017-05-09 11:38:03

标签: charts google-visualization

我试图使用谷歌图表绘制图表,我面临一个问题,我无法减少X轴标签的宽度。我在选项中使用了 chartArea ,如下所示。我仍然无法修复它。

options = {
            height : 450,
            width: 1024,
            bar: { groupWidth: '80%' },
            bars: 'horizontal', // Required for Material Bar Charts.
            chartArea:{left:30,top:10,width:'80%'}              
        };

我得到的结果如下:Chart result

1 个答案:

答案 0 :(得分:2)

材料图表

不支持多种选项

包括 - > chartArea.*

请参阅Tracking Issue for Material Chart Feature Parity

建议使用 Core 图表,使用以下选项...

theme: 'material'

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

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses', 'Profit'],
    ['High Blood Pressure', 1000, 400, 200],
    ['mmmmmmmmmm mmmmmmmmmmmmmmm mmmmmmmmmmmmmmm mmmmmmmmmmmmmmm mmmmmmmmmmmm', 1170, 460, 250],
    ['Test 1', 660, 1120, 300],
    ['Test 2', 1030, 540, 350]
  ]);

  var options = {
    height : 450,
    width: 1024,
    bar: { groupWidth: '80%' },
    chartArea:{left:30,top:10,width:'80%'},
    theme: 'material'
  };

  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>