简体   繁体   中英

Google Charts - avoid showing negative values ​on axis

Even including vAxis: {minValue:0} didn't work

How can I do to avoid showing negative values in the yAxis?

This happens when no value exists. In this case I don't want negative values ​​to appear on the axis

 google.charts.load('current', {packages: ['corechart','bar'],'language': 'pt'}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var arrayToData = [['Date','','Data',{role: 'style'},{role:'tooltip', 'p': {'html': true}}]]; arrayToData.push(['01/06', 0,0,'','']); arrayToData.push(['02/06', 0,0,'','']); arrayToData.push(['03/06', 0,0,'','']); var data = new google.visualization.arrayToDataTable(arrayToData); var options = google.charts.Bar.convertOptions( { tooltip: {isHtml: true}, chartArea: { height: '100%', width: '100%', top: 38, left: 15, right: 100, bottom: 48 }, vAxis: { viewWindow:{ min: 0 } }, yAxis:{ viewWindowMode: "explicit", viewWindow:{ min: 0 } }, series: { 0: {enableInteractivity: false,targetAxisIndex: 0, visibleInLegend: false, pointSize: 0, lineWidth: 0,type: 'line',textStyle: {fontSize: 0}}, 1: { targetAxisIndex: 1, } }, vAxes: { 0: {textPosition: 'none'}, 1: {}, }, }); var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); chart.draw(data, options); }
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>

I've tried several alternatives and none have been successful.

try using the ticks option...

                vAxis: {
                    ticks: [0, 1, 2]
                },

see following working snippet...

 google.charts.load('current', {packages: ['corechart','bar'],'language': 'pt'}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var arrayToData = [['Date','','Data',{role: 'style'},{role:'tooltip', 'p': {'html': true}}]]; arrayToData.push(['01/06', 0,0,'','']); arrayToData.push(['02/06', 0,0,'','']); arrayToData.push(['03/06', 0,0,'','']); var data = new google.visualization.arrayToDataTable(arrayToData); var options = { tooltip: {isHtml: true}, chartArea: { height: '100%', width: '100%', top: 38, left: 15, right: 100, bottom: 48 }, vAxis: { ticks: [0, 1, 2] }, series: { 0: {enableInteractivity: false,targetAxisIndex: 0, visibleInLegend: false, pointSize: 0, lineWidth: 0,type: 'line',textStyle: {fontSize: 0}}, 1: { targetAxisIndex: 1, } }, vAxes: { 0: {textPosition: 'none'} }, }; var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); chart.draw(data, options); }
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM