折线图如果全部为Null则隐藏列

Line Chart Hide Column If All Null

本文关键字:隐藏 Null 如果 全部 折线图      更新时间:2023-09-26

我正在从表中获取数据并创建图表。但是,如果列的所有值都为空/null,则会给我一个轴#0的数据列的类型不能为字符串如果一列的所有值都为null,是否有方法可以忽略/隐藏该列来创建图表?

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']
});
.exams {
  padding: 5px;
  background: #a2a2a2;
}
<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>

回答后更新:

我确实尝试过这个答案,如果其中一列为空,它将显示一个空图表正如我所说,我从一个表中获取数据并创建图表。我的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 ?>]);

这是arrayToDataTable方法的一个缺点。第一行数据的所有列中都必须具有正确类型的数据,并且不能使用{v: value, f: 'formatted value'}语法。由于您的行中有null值,API要么假设该列的数据类型为null,要么抛出关于未获得有效数据类型的错误。要解决此问题,您必须切换到标准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;
    }
 <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>

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

请参阅此处的详细说明https://groups.google.com/forum/?fromgroups=#!主题/谷歌可视化api/2Jafk8PyjV4