1

这是我尝试过的代码

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="chart_div"></div>


<script>
// Load the Visualization API and the piechart package.
google.charts.load('current', {packages: ['corechart', 'bar']});


// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {

 // Create the data table.
 var data = new google.visualization.DataTable();
 data.addColumn('string', 'Course');
 data.addColumn('number', 'Excellent');
 data.addColumn('number', 'Adequate');
 data.addColumn('number', 'Limited');
 data.addColumn('number', 'None');
 data.addColumn('number', 'Very Confident');
 data.addColumn('number', 'Fairly Confident');
 data.addColumn('number', 'Somewhat Confident');
 data.addColumn('number', 'Not at all');
 data.addRows([

     ['Knowledge level', 1, 8, 30, 0, 0, 0, 0, 0],

     ['Assessment skills', 1, 9, 18, 11, 0, 0, 0, 0],

     ['Planning skills', 2, 0, 20, 10, 0, 0, 0, 0],

     ['Confidence', 0, 0, 0, 0, 5, 6, 7, 8]
 ]);

 // Set chart options
 var options = {
     'title': 'Statewide Count across all courses',
     'width': 900,
     'height': 500
 };

 // Instantiate and draw our chart, passing in some options.
 var chart_div = document.getElementById('chart_div');
 var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

 //Wait for the chart to finish drawing before calling the getImageURI() method.
 /*google.visualization.events.addListener(chart, 'ready', function(){
                                        chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
                                        console.log(chart_div.innerHTML);
                                    })*/
 chart.draw(data, options);
}
</script>

当我们有特定字段的图表时，我想这样做，我只希望如果我们在数组中有一个 0 值，它们会显示空白图表。我只是希望我们没有显示该空白图表只是从图表中删除该空白区域。我

4

1 回答 1

1

也许使用'isStacked': true会为您工作，
请参阅以下示例...

google.charts.load('current', {
  'callback': function () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Course');
    data.addColumn('number', 'Excellent');
    data.addColumn('number', 'Adequate');
    data.addColumn('number', 'Limited');
    data.addColumn('number', 'None');
    data.addColumn('number', 'Very Confident');
    data.addColumn('number', 'Fairly Confident');
    data.addColumn('number', 'Somewhat Confident');
    data.addColumn('number', 'Not at all');
    data.addRows([
      ['Knowledge level', 1, 8, 30, 0, 0, 0, 0, 0],
      ['Assessment skills', 1, 9, 18, 11, 0, 0, 0, 0],
      ['Planning skills', 2, 0, 20, 10, 0, 0, 0, 0],
      ['Confidence', 0, 0, 0, 0, 5, 6, 7, 8]
    ]);

    var options = {
      'title': 'Statewide Count across all courses',
      'width': 900,
      'height': 500,
      'isStacked': true
    };

    var chart_div = document.getElementById('chart_div');
    var chart = new google.visualization.ColumnChart(chart_div);
    chart.draw(data, options);
  },
  'packages': ['corechart', 'bar']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

于 2016-07-02T15:37:21.163 回答