Как разделить даты в диаграмме области диаграмм Google - PullRequest
Новая
       21

Как разделить даты в диаграмме области диаграмм Google

1 голос
/ 23 января 2020

Я использую диаграммы Google, и в частности, у меня есть диаграмма с большим количеством ежемесячных данных. Однако, как вы можете видеть на изображении ниже, даты на оси X слишком близки, и их невозможно прочитать. Как я могу разделить даты, чтобы показать их? Большое спасибо!

enter image description here

и это мой код: 

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

1 Ответ

0 голосов
/ 23 января 2020

попробуйте увеличить нижнюю часть области диаграммы ... 

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

с дискретной осью (строковые значения на оси x), у вас также есть следующие опции. ..

hAxis.minTextSpacing - минимальный горизонтальный интервал в пикселях, допустимый между двумя смежными текстовыми метками.

hAxis.showTextEvery - сколько меток горизонтальной оси отображать, где 1 означает показать каждую метку, 2 означает показать каждую другую метку и т. д.

допускается больше элементов управления с непрерывной осью (объекты фактической даты на оси х)
в этом случае вы может построить массив (hAxis.ticks) с точными значениями

...