Google 시각화 막대 차트 두 막대를 쌓아

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 및 차트 옵션을 일부 개조하면 여전히이 기능을 사용할 수 있습니다.

내 솔루션

스택 바 판매에 대한 데이터 컬럼의 값이 0으로 표시됩니다 판매와 스택 막 대형을 방지하기 위해, 단지 비용과 이익의 값을 포함해야합니다. 비슷한 데이터 행을 가지지 만 Sales 현재 값과 나머지 값이 0 인 별도의 Sales 막대가 작성됩니다. 같은 날짜의 모든 막 대형 차트를 그룹화하려면 날짜 데이터 유형을 지정해야합니다. 그렇지 않은 경우 동일한 연도의 각 막 대형 차트간에 간격이 생깁니다. 열의 날짜 표현에 대한 자세한 내용은 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] 
    ]); 

가 누적 가로 막 대형을 달성하기 위해, 구글 차트 구성 옵션 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%'} 
    };