google視覚化棒グラフ2つの棒を積む

Question

私はGoogleの視覚化棒グラフを持っていますsample hereデータ形式は以下の通りです。

var data = google.visualization.arrayToDataTable([ 
      ['Year', 'Sales', 'Expenses', 'Profit'], 
      ['2014', 1000, 400, 200], 
      ['2015', 1170, 460, 250], 
      ['2016', 660, 1120, 300], 
      ['2017', 1030, 540, 350] 
     ]); 

セールスが別個のバーである場合の経費と利益バーの積み上げ方は？

Answer 1

現時点では、Google Charts APIにはこの機能は組み込まれていませんが、DataTableとChart Optionsの一部のリモデリングでもこれを達成できます。

私の解決策は、

積み上げバーは販売のためのデータ列の値がゼロとして表現されて販売して積み上げバーを避けるために、唯一の費用と利益の値が含まれている必要があります。同様のデータ行を持つがSalesの値と残りの値を持つ別のSalesバーが作成されます。同じ日付のすべての棒グラフをグループ化するには、Dateデータ型を指定する必要があります。これが実装されていない場合は、同じ棒グラフと同じ年の間にギャップがあります。 列の日付表現の詳細はhereです。

var data = google.visualization.arrayToDataTable([ 
    [ {label: 'Year', id: 'year', type: 'date'}, 
     {label: 'Sales', id: 'Sales', type: 'number'}, 
     {label: 'Expenses', id: 'Expenses', type: 'number'}, 
     {label: 'Profit', id: 'Profit', type: 'number'}], 
     [{v:new Date('2014'), f:'2014'}, 0, 400, 200], 
     [{v:new Date('2014'), f:'2014'}, 1000, 0, 0], 
     [{v:new Date('2015'), f:'2015'}, 0, 460, 250], 
     [{v:new Date('2015'), f:'2015'}, 1170, 0, 0], 
     [{v:new Date('2016'), f:'2016'}, 0, 1120, 300], 
     [{v:new Date('2016'), f:'2016'}, 600, 0, 0], 
     [{v:new Date('2017'), f:'2017'}, 0, 540, 350], 
     [{v:new Date('2017'), f:'2017'}, 1030, 0, 0] 
    ]); 

積み重ね棒グラフを達成するために、Googleのチャート設定オプションisStacked: trueが使用されています。縦軸が月と日のタイムラインのように動作するのを避けるため、縦軸はvAxis: {format: 'yyyy'}を使用して年を表示するようにフォーマットされています。書式設定の詳細については、hereを参照してください。異なる年のバーの間隔を避けるには、機能bar: {groupWidth: '90%'}が使用されます。

var options = { 
     chart: { 
     title: 'Company Performance', 
     subtitle: 'Sales, Expenses, and Profit: 2014-2017', 
     }, 
     bars: 'horizontal', // Required for Material Bar Charts. 
     hAxis: {format: 'decimal'}, 
     vAxis: { 
     format: 'yyyy' 
     }, 
     height: 400, 
     colors: ['#1b9e77', '#d95f02', '#7570b3'], 
     isStacked: true, 
     bar: {groupWidth: '90%'} 
    };