So stellen Sie Achsenstartpunkt auf 0 für Google Material Liniendiagramm

Question

Ich versuchte mehrere Lösungen aus How to set Axis step in Google Chart?, Trying to set y axis to 0 in google charts, und mehrere andere Beiträge, die ich ohne Glück geschaut habe. Hat jemand eine Vorstellung davon, was getan werden kann, um die y-Achse auf einen Startpunkt von 0 zu setzen? Ich kann mehr Informationen zur Verfügung stellen, wenn es sein muss. Auch eine Nebenfrage, ist es möglich, beim Anklicken eine Linie nach vorne zu bringen. Wenn Sie beispielsweise auf die aktuelle Trendlinie klicken, wird sie fett dargestellt, aber die Datenpunkte werden nicht angezeigt.

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

Ich habe eine jsfiddle Verbindung, wo ich meinen Code habe. https://jsfiddle.net/abufr36y/

Answer 1

Need Optionen für Material Charts konvertieren, auf der Verpackung abhängig ...

google.charts.Line.convertOptions(options)

Siehe Beispiel folgende ...

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>