Google图表如何隐藏值= 0

Question

是否可以在hAxis上隐藏null值？ 或更好地将pointSize: 0设置为hAxis

如果是，哪个选项？

我尝试了ComboChart

        function drawChart() {

        var jsonData = $.ajax({
            url: "getData.php",
            dataType: "json",
            async: false
            }).responseText;

        var options = {
            width: 2500,
            height: 1080,
            legend: { position: 'top', maxLines: 10 },
            bar: { groupWidth: '75%' },
            isStacked: true,
            title: '15-tägiger Wettbewerb, 17.01.2018 - 06.02.2018', 
            titlePosition: 'out',
            colors: ['green', '#e6693e', 'blue'],
            backgroundColor: 'white',
            tooltip: { trigger: 'selection' },
            legend: { position: 'none' },
            vAxis: { viewWindowMode:'explicit', viewWindow: { max: 130}},
            seriesType: 'bars',
            series: {   3: {type: 'scatter', pointSize: 30, color: 'black'},
                        4: {type: 'scatter', pointSize: 30, color: 'black'},
                        5: {type: 'scatter', pointSize: 30, color: 'black'},
                        6: {type: 'scatter', pointSize: 30, color: 'black'},

             },
             pointShape: 'star',
        };

        var data = new google.visualization.DataTable(jsonData);

        var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
        chart.draw(data, options);

        }

Answer 1

只是有点困惑，标题说hide 0 ，但问题说hide null ...

但是，如果您使用null而不是0 ，那么星形将不会出现...

['', 2, 4, null, null, null, null, null],  // <-- star will NOT appear
['', 2, 4, 0, 0, 0, 0, 0],                 // <-- star will appear at the bottom

请参阅以下工作片段...

 google.charts.load('current', { packages: ['corechart'] }).then(function () { var jsonData = [ ['', 2, 4, null, null, null, null, null], ['', 2, 4, 0, 0, 0, 0, 0], ]; var options = { //width: 2500, //height: 1080, legend: { position: 'top', maxLines: 10 }, bar: { groupWidth: '75%' }, isStacked: true, title: '15-tägiger Wettbewerb, 17.01.2018 - 06.02.2018', titlePosition: 'out', colors: ['green', '#e6693e', 'blue'], backgroundColor: 'white', tooltip: { trigger: 'selection' }, legend: { position: 'none' }, vAxis: { viewWindowMode:'explicit', viewWindow: { max: 130}}, seriesType: 'bars', series: { 3: {type: 'scatter', pointSize: 30, color: 'black'}, 4: {type: 'scatter', pointSize: 30, color: 'black'}, 5: {type: 'scatter', pointSize: 30, color: 'black'}, 6: {type: 'scatter', pointSize: 30, color: 'black'}, }, pointShape: 'star', }; var data = google.visualization.arrayToDataTable(jsonData, true); var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); chart.draw(data, options); }); 

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

编辑

您可以使用包含计算列的数据视图将零更改为null，
请参阅以下工作片段...

 google.charts.load('current', { packages: ['corechart'] }).then(function () { var jsonData = [ ['', 2, 4, null, null, null, null, null], ['', 2, 4, 0, 0, 0, 0, 0], ]; var options = { //width: 2500, //height: 1080, legend: { position: 'top', maxLines: 10 }, bar: { groupWidth: '75%' }, isStacked: true, title: '15-tägiger Wettbewerb, 17.01.2018 - 06.02.2018', titlePosition: 'out', colors: ['green', '#e6693e', 'blue'], backgroundColor: 'white', tooltip: { trigger: 'selection' }, legend: { position: 'none' }, vAxis: { viewWindowMode:'explicit', viewWindow: { max: 130}}, seriesType: 'bars', series: { 3: {type: 'scatter', pointSize: 30, color: 'black'}, 4: {type: 'scatter', pointSize: 30, color: 'black'}, 5: {type: 'scatter', pointSize: 30, color: 'black'}, 6: {type: 'scatter', pointSize: 30, color: 'black'}, }, pointShape: 'star', }; var data = google.visualization.arrayToDataTable(jsonData, true); // build view var view = new google.visualization.DataView(data); var viewColumns = []; $.each(new Array(data.getNumberOfColumns()), function (col) { viewColumns.push({ calc: function (dt, row) { var value = dt.getValue(row, col); if (value === 0) { value = null; } return value; }, label: data.getColumnLabel(col), type: data.getColumnType(col) }); }); view.setColumns(viewColumns); var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); // draw view chart.draw(view, options); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>