谷歌图表,Y轴没有排序,无法修复它。

问题描述 投票:1回答:1
<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>

我不知道如何解决这个问题,我已经尝试了其他地图从谷歌以及,但它doesnt似乎帮助我弄清楚什么是错的,为什么Y轴不下令从0。

charts google-visualization
1个回答
0
投票

当使用 材料 图表,你需要使用以下静态方法将选项转换为 材料 选项...

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>

注意:还有一些选项不被以下选项所支持。材料 图表,见--> 追踪材料图特征奇偶性问题

© www.soinside.com 2019 - 2024. All rights reserved.