如何在 google 个图表的面积图中分隔日期

Question

我正在使用 google 图表，特别是我有一个包含许多月度数据的面积图。但是，如下图所示，x 轴上的日期过于接近，无法读取。我如何分隔日期以显示它们？非常感谢！

这是我的代码：

   <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>;
   <script type='text/javascript'>;
   google.charts.load('current', {'packages':['corechart']});;
   google.charts.setOnLoadCallback(drawChart2);;

   function drawChart2() {;
        var data = google.visualization.arrayToDataTable([;
        ['Time', 'Retorno'],;

                for ($x = 0; $x <= count($date_array_all)-1; $x++) {
       ['" . $date_array_all[$x] . "', " . $equity_array_all[$x] . "], ;
                }
   ]);;

        var options = {;
        chartArea: {left: 70, right:50, top: 30, bottom: 50},;
        series: {;
         0: { color: '#469DE4' },},;
              legend: 'none',;
        vAxis: {textStyle:{color: '#7F7F7F'}, baselineColor: '#CCCCCC', format: '#%', gridlines: {color: 'transparent'}},; 
        fontName: 'Source Sans Pro',;
        hAxis: {textStyle:{color: '#7F7F7F'}}};;
        var chart = new google.visualization.AreaChart(document.getElementById('chart_div2'));;
        var formatter = new google.visualization.NumberFormat({pattern:'#,###%'});;
        formatter.format(data, 1);;

        chart.draw(data, options);;
        };

    </script>;
    <div id='chart_div2' style='height: 450px;'></div>;

Answer 1

尝试增加图表区域的底部...

chartArea: {left: 70, right:50, top: 30, bottom: 72}  // <-- increase bottom here

使用离散轴（x 轴上的字符串值），您还有以下选项...

hAxis.minTextSpacing - Minimum horizontal spacing, in pixels, allowed between two adjacent text labels.

hAxis.showTextEvery - How many horizontal axis labels to show, where 1 means show every label, 2 means show every other label, and so on.

连续轴允许更多控制（x 轴上的实际日期对象）
在这种情况下，您可以构建一个具有确切值

的数组 (hAxis.ticks)

如何在 google 个图表的面积图中分隔日期

How to separate the dates in area chart of google charts

charts

google-api

google-visualization