1列のみの幅を変更するGoogleグラフ

Question

グラフに複数の列がある場合は、列の分布がうまく機能します。私はgroupWidthを使用し、列は値を尊重します。

グラフが戻ったときに、1つの列だけが強制的にグラフ空間全体を占有します。

どのようにカラムを小さくするのですか？

マイコード：

var options = { 
    width: '100%', 
    height: 500, 
    isStacked: true, 
    series: [{ 
     color: '#5fb560' 
    }, { 
     color: '#db4437' 
    }, { 
     color: '#3366cc' 
    }], 
    legend: { 
     textStyle: { 
      color: '#6B6A6A' 
     } 
    }, 
    bar: { 
     groupWidth: '55%' 
    }, 
    chart: { 
     title: 'Disponibilidade de equipamentos', 
     subtitle: 'De: 04/08/2016 até: 04/08/2016 - Torre de resfriamento (TR_01_01)', 
    }, 
    titleTextStyle: { 
     color: '#333333' 
    } 
}; 

var data = [ 
    ['aqui em baixo', 'Ocupada', 'Disponível', 'Sobre hora'], 
    ["TR_01_01", 6.81818181818, 0, 6.18181818182] 
]; 

var chart; 
google.charts.load('current', { 
    callback: function() { 

     var container = document.getElementById('chart_div'); 
     chart = new google.charts.Bar(container); 

     google.visualization.events.addListener(chart, 'ready', function() { 

      $('text:contains("Disponibilidade de equipamentos")').click(function() { 
       $(this).html('cliquei') 
      }); 

      $('text:contains("aqui em baixo")').click(function() { 
       $(this).html('cliquei') 
      }); 

      $('text:contains("Disponibilidade de equipamentos")').next().attr('fill', "#6B6A6A"); 
     }); 


     chart.draw(google.visualization.arrayToDataTable(data), google.charts.Bar.convertOptions(options)); 
    }, 
    packages: ['bar'] 
}); 


$(window).on("resize", function(event) { 
    chart.draw(google.visualization.arrayToDataTable(data), google.charts.Bar.convertOptions(options)); 
}); 

Answer 1

材料チャート

を使用した場合の幅を変更しますが、あなたは、データテーブルに空白行を追加することができますオプションはありません、
既存行の両側

作業スニペット以下を参照してください

google.charts.load('current', { 
 
    callback: function() { 
 
    var options = { 
 
     width: '100%', 
 
     height: 500, 
 
     isStacked: true, 
 
     series: [{ 
 
      color: '#5fb560' 
 
     }, { 
 
      color: '#db4437' 
 
     }, { 
 
      color: '#3366cc' 
 
     }], 
 
     legend: { 
 
      textStyle: { 
 
       color: '#6B6A6A' 
 
      } 
 
     }, 
 
     bar: { 
 
      groupWidth: '55%' 
 
     }, 
 
     chart: { 
 
      title: 'Disponibilidade de equipamentos', 
 
      subtitle: 'De: 04/08/2016 até: 04/08/2016 - Torre de resfriamento (TR_01_01)', 
 
     }, 
 
     titleTextStyle: { 
 
      color: '#333333' 
 
     } 
 
    }; 
 

 
    var data = [ 
 
     ['aqui em baixo', 'Ocupada', 'Disponível', 'Sobre hora'], 
 
     ["TR_01_01", 6.81818181818, 0, 6.18181818182] 
 
    ]; 
 

 
    var dataTable = google.visualization.arrayToDataTable(data); 
 
    if (dataTable.getNumberOfRows() === 1) { 
 
     dataTable.insertRows(0, [[' ', null, null, null]]) 
 
     dataTable.addRow([' ', null, null, null]); 
 
    } 
 

 
    var container = document.getElementById('chart_div'); 
 
    chart = new google.charts.Bar(container); 
 
    chart.draw(dataTable, google.charts.Bar.convertOptions(options)); 
 
    }, 
 
    packages: ['bar'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>