Question

这是我试过的代码

<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值它们显示空白图形。我只是想要我们没有显示空白图只是从图中删除该空白区域。我

Answer 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>

从条形图中删除0值

1 个答案: