javascript - Google Charts 如何隐藏值 = 0

Question

是否可以隐藏 hAxis 上的 null 值？或者当点位于 hAxis

上时，最好设置 pointSize: 0

如果是，哪个选项？

我尝试了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

只是有点困惑，标题说隐藏0，但问题说隐藏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>

编辑

您可以使用带有计算列的数据 View 将零更改为空，
请参阅以下工作片段...

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>