Googleマテリアル折れ線グラフの軸始点を0に設定する方法

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>