折线图隐藏列如果全部为空

Question

我从表中获取数据并创建图表。但是如果所有列的值都为空/ null，它将为我提供一个数据列，用于轴＃0不能是类型字符串 有没有办法，如果列的所有值都为空，仍然创建图表忽略/隐藏该列/列？

＆＃13;

＆＃13;

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['vdate', 'THS', 'FT3', 'FT4'],
      [new Date('08/01/2016'), 10, null, 30],
      [new Date('08/02/2016'), 40, null, 60],
      [new Date('08/03/2016'), 70, null, 90]
    ]);

    var chartColors = ['#000000', '#D20000', '#5CB85C'];

    var options = {
      legendTextStyle: {color: '#757575'},
      fontName: 'Didact Gothic',
      curveType: 'function',
      height: 300,
      pointSize: 5,
      interpolateNulls: true,
      colors: chartColors,
      hAxis: {title: 'Visit', titleTextStyle: {fontName: 'Didact Gothic', color: '#757575'}, textStyle:{color: '#757575'}},
      vAxis: {title: 'Prices', titleTextStyle: {fontName: 'Didact Gothic', color: '#757575'}, textStyle:{color: '#757575'}, viewWindow: {min:0}}
    };

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
    data.addColumn({type: 'string', role: 'annotation'});

    var view = new google.visualization.DataView(data);
    var initialchart =[0];
    var selectedColors = [];
    if($("#kolom1").is(':checked')) {
    	initialchart.push(1,{ calc: "stringify", sourceColumn: 1, type: "string", role: "annotation"});
    	selectedColors.push(chartColors[0]);
    }
	if ($("#kolom2").is(':checked')) {
    	initialchart.push(2,{ calc: "stringify", sourceColumn: 2, type: "string", role: "annotation"});
      selectedColors.push(chartColors[1]);
    }
	if ($("#kolom3").is(':checked')) {
    	initialchart.push(3,{ calc: "stringify", sourceColumn: 3, type: "string", role: "annotation"});
      selectedColors.push(chartColors[2]);
    }
    view.setColumns(initialchart);
    options.colors = selectedColors;
    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
    chart.draw(view, options);

    $(".checkbox").change(function() {
      view = new google.visualization.DataView(data);
      var checkchart =[0];
      var selectedColors = [];

      if($("#kolom1").is(':checked')) {
        checkchart.push(1,{calc: "stringify", sourceColumn: 1, type: "string", role: "annotation"});
        selectedColors.push(chartColors[0]);
      }
      if($("#kolom2").is(':checked')) {
        checkchart.push(2,{calc: "stringify", sourceColumn: 2, type: "string", role: "annotation"});
        selectedColors.push(chartColors[1]);
      }
      if($("#kolom3").is(':checked')) {
        checkchart.push(3,{calc: "stringify", sourceColumn: 3, type: "string", role: "annotation"});
        selectedColors.push(chartColors[2]);
      }
      view.setColumns(checkchart);
      options.colors = selectedColors;
      chart.draw(view, options);
    });
  },
  packages: ['corechart']
});

＆＃13;

.exams {
  padding: 5px;
  background: #a2a2a2;
}

＆＃13;

<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="checkboxes" style="min-height: 100px;">
  <input type="checkbox" class="checkbox" style="display: none;" id="kolom1" checked="checked" /><label class="exams" for="kolom1"><span class="check_icon"></span>TSH</label>
  <input type="checkbox" class="checkbox" style="display: none;" id="kolom2" checked="checked" /><label class="exams" for="kolom2"><span class="check_icon"></span>FT3</label>
  <input type="checkbox" class="checkbox" style="display: none;" id="kolom3" checked="checked" /><label class="exams" for="kolom3"><span class="check_icon"></span> FT4</label>
</div>
<div name="curve_chart" id="curve_chart"></div>

＆＃13;

＆＃13;

＆＃13;

回答后更新：

我确实尝试过这个答案，如果其中一列为空，它将显示一个空图表 正如我所说，我从表中获取数据并创建图表。我的data.addRows是否正确？

修复为null：

我发现问题出在哪里，php变量为null传递空格，所以每一行的最后一个值都错了，* here] 我修复了一个php if is_null并更新下面的代码。

while($row = mysqli_fetch_array($results)){
if (is_null($row['check_tsh']) {$check_tsh = "null";}
if (is_null($row['check_ft3']) {$check_ft3 = "null";}
if (is_null($row['check_ft4']) {$check_ft4 = "null";}
$chartentry .= "['".date("d/m/Y", strtotime($row['vdate']))."', ".$check_tsh.", ".$check_ft3.", ".$check_ft4."],";
}

//chartentry Array: ['02/08/2016', 100,, 300],['03/08/2016', , , ],['04/08/2016', , , ],['05/08/2016', , , ]

var data = new google.visualization.DataTable();
data.addColumn('string', 'vdate');
    data.addColumn('number', 'THS');
    data.addColumn('number', 'FT3');
    data.addColumn('number', 'FT4');
data.addRows([<?php echo $chartentry ?>]);

Answer 1

这是id="password2"方法的缺点。您的第一行数据必须在所有列中包含正确类型的数据，并且不得使用arrayToDataTable语法。由于您的行中有 null 值，因此API要么假定该列的数据类型为null，要么是因为没有获得有效的数据类型而引发错误。要解决此问题，您必须切换到标准{v: value, f: 'formatted value'}构造函数：

DataTable

google.charts.load('current', {
      callback: function () {
       var data = new google.visualization.DataTable();
       data.addColumn('string', 'vdate');
			 data.addColumn('number', 'THS');
			 data.addColumn('number', 'FT3');
			 data.addColumn('number', 'FT4');
       data.addRows([
          ['08/01/2016', 10, null, 30],
          ['08/02/2016', 40, null, 60],
          ['08/03/2016', 70, null, 90]
        ]);
       
        var chartColors = ['#000000', '#D20000', '#5CB85C'];

        var options = {
          legendTextStyle: {color: '#757575'},
          fontName: 'Didact Gothic',
          curveType: 'function',
          height: 300,
          pointSize: 5,
          interpolateNulls: true,
          colors: chartColors,
          hAxis: {title: 'Visit', titleTextStyle: {fontName: 'Didact Gothic', color: '#757575'}, textStyle:{color: '#757575'}},
          vAxis: {title: 'Prices', titleTextStyle: {fontName: 'Didact Gothic', color: '#757575'}, textStyle:{color: '#757575'}, viewWindow: {min:0}}
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
        data.addColumn({type: 'string', role: 'annotation'});

        var view = new google.visualization.DataView(data);
        var initialchart =[0];
        var selectedColors = [];
        if($("#kolom1").is(':checked')) {
        	initialchart.push(1,{ calc: "stringify", sourceColumn: 1, type: "string", role: "annotation"});
        	selectedColors.push(chartColors[0]);
        }
    	if ($("#kolom2").is(':checked')) {
        	initialchart.push(2,{ calc: "stringify", sourceColumn: 2, type: "string", role: "annotation"});
          selectedColors.push(chartColors[1]);
        }
    	if ($("#kolom3").is(':checked')) {
        	initialchart.push(3,{ calc: "stringify", sourceColumn: 3, type: "string", role: "annotation"});
          selectedColors.push(chartColors[2]);
        }
        view.setColumns(initialchart);
        options.colors = selectedColors;
        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
        chart.draw(view, options);

        $(".checkbox").change(function() {
          view = new google.visualization.DataView(data);
          var checkchart =[0];
          var selectedColors = [];

          if($("#kolom1").is(':checked')) {
            checkchart.push(1,{calc: "stringify", sourceColumn: 1, type: "string", role: "annotation"});
            selectedColors.push(chartColors[0]);
          }
          if($("#kolom2").is(':checked')) {
            checkchart.push(2,{calc: "stringify", sourceColumn: 2, type: "string", role: "annotation"});
            selectedColors.push(chartColors[1]);
          }
          if($("#kolom3").is(':checked')) {
            checkchart.push(3,{calc: "stringify", sourceColumn: 3, type: "string", role: "annotation"});
            selectedColors.push(chartColors[2]);
          }
          view.setColumns(checkchart);
          options.colors = selectedColors;
          chart.draw(view, options);
        });
      },
      packages: ['corechart']
    });

.exams {
      padding: 5px;
      background: #a2a2a2;
    }

请参阅此处的工作代码 https://jsfiddle.net/bqacua6y/

请参阅此处的详细说明 https://groups.google.com/forum/?fromgroups=#!topic/google-visualization-api/2Jafk8PyjV4