Удаление некоторых меток оси X в Google Charts - PullRequest
Новая
       8

Удаление некоторых меток оси X в Google Charts

1 голос
/ 18 апреля 2020

В настоящее время я делаю этот график с кучей меток на x-доступе, которые заставляют его выглядеть многолюдно, может кто-нибудь, пожалуйста, укажет мне правильное направление, где я могу изменить его, где ось X показывает только 1990, 1995, 2000, 2005, 2010 и 2015 годы. Большое спасибо 

      function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Moore',   'Edmond', 'Norman'],
      ['1990',  40332,      52380,   80435],
      ['1991',  40904,      53884,   81718],
      ['1992',  41554,      55477,   83300],
      ['1993',  42427,      57334,   85004],
      ['1994',  43151,      59470,   86932],
      ['1995',  43679,      61281,   88387],
      ['1996',  44241,      62892,   89562],
      ['1997',  44859,      64115,   91921],
      ['1998',  45233,      65145,   93073],
      ['1999',  45431,      66757,   94193],
      ['2000',  41477,      68607,   96882],
      ['2001',  42439,      69357,   98530],
      ['2002',  43909,      70644,   99222],
      ['2003',  45071,      71707,   100437],
      ['2004',  46595,      73254,   100983],
      ['2005',  48179,      75456,   102297],
      ['2006',  49966,      77172,   105622],
      ['2007',  51279,      78066,   106168],
      ['2008',  52852,      79890,   107636],
      ['2009',  54026,      81653,   109447],
      ['2010',  55396,      81466,   111380],
      ['2011',  56706,      82943,   113872],
      ['2012',  57840,      84936,   115629],
      ['2013',  58358,      86988,   118136],
      ['2014',  59018,      88656,   117693],
      ['2015',  60170,      90168,   119745],
      ['2016',  61081,      91469,   121512],
      ['2017',  61588,      91830,   122965],
      ['2018',  62103,      93127,   123471],
    ]);

    var options = {
      title: 'Population of Moore Oklahoma',
      curveType: 'function',
      legend: { position: 'bottom' },
    };

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

    chart.draw(data, options);
  }

1 Ответ

0 голосов
/ 18 апреля 2020

если вы используете числа -> 2010 - вместо строк -? '2010'
, затем вы можете контролировать, какие метки появляются с помощью опции ticks ... 

    hAxis: {
      ticks: [1990, 1995, 2000, 2005, 2010, 2015]
    }

см. Следующий рабочий фрагмент ... 

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Moore',   'Edmond', 'Norman'],
    [1990,  40332,      52380,   80435],
    [1991,  40904,      53884,   81718],
    [1992,  41554,      55477,   83300],
    [1993,  42427,      57334,   85004],
    [1994,  43151,      59470,   86932],
    [1995,  43679,      61281,   88387],
    [1996,  44241,      62892,   89562],
    [1997,  44859,      64115,   91921],
    [1998,  45233,      65145,   93073],
    [1999,  45431,      66757,   94193],
    [2000,  41477,      68607,   96882],
    [2001,  42439,      69357,   98530],
    [2002,  43909,      70644,   99222],
    [2003,  45071,      71707,   100437],
    [2004,  46595,      73254,   100983],
    [2005,  48179,      75456,   102297],
    [2006,  49966,      77172,   105622],
    [2007,  51279,      78066,   106168],
    [2008,  52852,      79890,   107636],
    [2009,  54026,      81653,   109447],
    [2010,  55396,      81466,   111380],
    [2011,  56706,      82943,   113872],
    [2012,  57840,      84936,   115629],
    [2013,  58358,      86988,   118136],
    [2014,  59018,      88656,   117693],
    [2015,  60170,      90168,   119745],
    [2016,  61081,      91469,   121512],
    [2017,  61588,      91830,   122965],
    [2018,  62103,      93127,   123471],
  ]);

  var options = {
    title: 'Population of Moore Oklahoma',
    curveType: 'function',
    legend: { position: 'bottom' },
    hAxis: {
      format: '0',
      ticks: [1990, 1995, 2000, 2005, 2010, 2015]
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curve_chart"></div>
...