如何在google图表中设置hAxis文本的数量？

Question

我正在绘制日期类型为hAxis的折线图。 绘制具有多行（数据）的小图表使hAxis文本到达＆＃39; ...＆＃39;。我现在无法显式地显示hAxis文本。 我该如何解决这个问题？

Answer 1

当有很多数据时文本变得倾斜

缩小chartArea.height以提供足够的空间来显示标签

chartArea.left也可能需要调整，以完全显示第一个标签

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

google.charts.load('current', {
  callback: function () {
    var dataTable = new google.visualization.DataTable({
      cols: [
        {id: 'Date', type: 'date'},
        {id: 'A', type: 'number'},
        {id: 'B', type: 'number'},
        {id: 'C', type: 'number'},
        {id: 'D', type: 'number'}
      ],
      rows: [
        {c:[{v: new Date(2016, 0, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 0}]},
        {c:[{v: new Date(2016, 1, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 24}]},
        {c:[{v: new Date(2016, 2, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 20}]},
        {c:[{v: new Date(2016, 3, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 48}]},
        {c:[{v: new Date(2016, 4, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 53}]},
        {c:[{v: new Date(2016, 5, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 61}]},
        {c:[{v: new Date(2016, 6, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 63}]},
        {c:[{v: new Date(2016, 7, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 66}]},
        {c:[{v: new Date(2016, 8, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 70}]},
        {c:[{v: new Date(2016, 9, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 75}]},
        {c:[{v: new Date(2016, 10, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 78}]},
        {c:[{v: new Date(2016, 11, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 80}]},
        {c:[{v: new Date(2017, 0, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 85}]},
        {c:[{v: new Date(2017, 1, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 90}]}
      ]
    });

    var options = {
      chartArea: {
        left: 52,
        height: '50%'
      },
      hAxis: {
        format: 'MMM dd, yyyy'
      },
      height: 200,
      legend: 'none',
      title: 'Example',
      width: 240
    };

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(dataTable, options);
  },
  packages:['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>