Question

我尝试了多种解决方案 How to set Axis step in Google Chart?，Trying to set y axis to 0 in google charts以及其他一些我没有运气的帖子。有没有人知道为了将y轴设置为0的起点可以做些什么？如果需要，我可以提供更多信息。另外一个问题是，点击时可以将线条带到前面。例如，当您单击当前趋势线时，它会以粗体显示，但不会显示数据点。

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

我有一个jsfiddle链接，我有我的代码。 https://jsfiddle.net/abufr36y/

Answer 1

需要转换材料图表的选项，具体取决于包...

google.charts.Line.convertOptions(options)

参见以下示例...

google.charts.load('current', {
  callback: drawChart,
  packages: ['line']
});

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 view = new google.visualization.DataView(data);
  view.setColumns([0, 2, 3, 4, 5, 1]);

  var chart = new google.charts.Line(document.getElementById('thelinechart'));

  // convert options for Material Charts, use view vs. data
  chart.draw(view, google.charts.Line.convertOptions(options));
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="thelinechart"></div>

如何为Google素材折线图设置轴起点为0

1 个答案: