гугл чарты, ось у не упорядочена, не могу это исправить - PullRequest
Новая
       17

гугл чарты, ось у не упорядочена, не могу это исправить

1 голос
/ 26 апреля 2020 
<div id="thelinechart" style="width: 1000px; height: 550px"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 <script>google.charts.load('current', {'packages':['line']});
      google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

var data = new google.visualization.DataTable();data.addColumn('string','Year');
data.addColumn('number','Current Trend');
data.addColumn('number','2015 Projection');
data.addColumn('number','2016 Projection');
data.addColumn('number','2017 Projection');
data.addColumn('number','2018 Projection');
data.addRows([
['2015',250,250,null,null,null],['2016',200,300,200,null,null],['2017',200,310,230,200,null],['2018',290,340,320,280,290],['2019',null,370,350,360,290],['2020',null,null,430,470,390],['2021',null,null,null,520,440],['2022',null,null,null,null,450]
 ]);

      var options = {
        chart: {
          title: 'Capacity',
          subtitle: 'in weight'
        },
        width: 850,
        height: 450,
vAxis: {
        viewWindowMode: 'explicit',
        viewWindow: {
          //max: 8000,
          min: 0,
        },
        gridlines: {
          count: 18,  //set kind of step (max-min)/count
        }
      }
      };

      var chart = new google.charts.Line(document.getElementById('thelinechart'));

      chart.draw(data, options);
    }
    </script>

Я не знаю, как это исправить, и я пробовал и другие карты от Google, но, похоже, это не помогает мне выяснить, что происходит не так и почему ось y не упорядочена от 0.

1 Ответ

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

при использовании диаграммы материал ,
необходимо использовать следующий метод stati c, чтобы преобразовать параметры в материал параметры ... 

google.charts.Line.convertOptions(options)

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

google.charts.load('current', {
  packages: ['line']
}).then(function () {
  var data = new google.visualization.DataTable();data.addColumn('string','Year');
  data.addColumn('number','Current Trend');
  data.addColumn('number','2015 Projection');
  data.addColumn('number','2016 Projection');
  data.addColumn('number','2017 Projection');
  data.addColumn('number','2018 Projection');
  data.addRows([
    ['2015',250,250,null,null,null],['2016',200,300,200,null,null],['2017',200,310,230,200,null],['2018',290,340,320,280,290],['2019',null,370,350,360,290],['2020',null,null,430,470,390],['2021',null,null,null,520,440],['2022',null,null,null,null,450]
  ]);

  var options = {
    chart: {
      title: 'Capacity',
      subtitle: 'in weight'
    },
    width: 850,
    height: 450,
    vAxis: {
      viewWindowMode: 'explicit',
      viewWindow: {
        //max: 8000,
        min: 0,
      },
      gridlines: {
        count: 18,  //set kind of step (max-min)/count
      }
    }
  };

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

ПРИМЕЧАНИЕ: есть также несколько опций, которые не поддерживаются диаграммами материал ,
см. -> Отслеживание Выпуск для паритета характеристик диаграммы материалов

...