세 가지 데이터 세트에 대한 누적 막대 차트를 만드는 방법은 무엇입니까?

debugcn 에 게시 Dev

Mkalafut

Google 차트를 사용하여 일부 메트릭을 시각화하고 있는데 약간의 문제가 발생했습니다. 지금은 다음과 같은 막대 그래프 (아래 코드)가 있고 그 뒤에있는 코드는

자바 스크립트

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', { 'packages': ['bar', 'corechart'] });
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Branch Office', 'DataSet 1', 'DataSet 2', 'DataSet 3'],
            ['Chicago', 400, 500, 1000],
            ['New York', 400, 500, 1000],
            ['Seattle', 400, 500, 1000],
            ['Average', 400, 500, 1000]
        ]);

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

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

        chart.draw(data, google.charts.Bar.convertOptions(options));

        var btns = document.getElementById('btn-group');

        btns.onclick = function (e) {

            if (e.target.tagName === 'BUTTON') {
                options.hAxis.format = e.target.id === 'none' ? '' : e.target.id;
                chart.draw(data, google.charts.Bar.convertOptions(options));
            }
        }
    }
</script>

HTML

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

유사한 답변에서 가져온 가장 가까운 것은 이미 게시 된 몇 가지 바이올린을 수정하는 것이지만 필요한 방식으로 작동하는 것 같습니다. 스택 막대 그래프와 함께 제공 한 차트를 결합하려고합니다 ( 여기에서 설명하고 설명 했지만 Google 또는 Stack Overflow에서 본 모든 작은 일회성 해킹은 필요한 것을 얻지 못합니다.

본질적으로 "DataSet 3"막대가 이와 유사한 막대로 나눌 수 있기를 원합니다.

이미 가지고있는 차트를 데이터 포인트 당 3 개의 막대가있는 누적 막대 그래프로 바꾸려면 어떻게해야합니까? 그렇게 할 수 없다면 비슷한 결과를 얻기 위해 내가 할 수있는 가장 가까운 것은 무엇입니까?

편집 : 앞서 언급 한 바이올린을 추가하는 것을 잊었습니다. 이것은 내가 http://jsfiddle.net/qv325979/126/이 필요한 최종 결과 에 도달 한 것과 비슷하지만 여전히 옳지 않으며 작업을 시작한 예제를 크게 수정해야 이 점. 나는 본질적으로 3 개의 막대 (2 대신)가 있고 각 항목의 상단 2 개의 막대에는 1 개의 데이터 포인트가 있고 하단 막대는 5 개 정도로 나눌 수 있습니다.

나는 막대를 나누는 방법과 그 바이올린의 상단 막대에 5 개의 별도 세그먼트가 있고 빨간색 막대에는 1 개만 있으므로 더 많은 지식을 가진 사람이 왜 그 이유를 설명 할 수 있는지 완전히 이해하지 못합니다.

흰색 모자

하기 만 한 세그먼트와 다음 5 정도와 셋째 줄과 2 개의 바 있습니다 ...

series처음 두 시리즈 의 옵션을 사용하여 각 막대를 분리하십시오.

hAxes옵션을 사용하여 추가 축의 레이블을 숨 깁니다.

다음 작업 스 니펫 참조 ...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Branch Office', 'DataSet 1', 'DataSet 2', 'DataSet 3-0', 'DataSet 3-1', 'DataSet 3-2', 'DataSet 3-3', 'DataSet 3-4'],
      ['Chicago', 400, 500, 200, 200, 200, 200, 200],
      ['New York', 400, 500, 200, 200, 200, 200, 200],
      ['Seattle', 400, 500, 200, 200, 200, 200, 200],
      ['Average', 400, 500, 200, 200, 200, 200, 200]
    ]);

    var options = {
      hAxes: {
        1: {
          textStyle: {
            color: 'transparent'
          }
        },
        2: {
          textStyle: {
            color: 'transparent'
          }
        }
      },
      bars: 'horizontal',
      colors: ['#1b9e77', '#d95f02', '#7570b3'],
      hAxis: {
        format: 'decimal'
      },
      height: 400,
      isStacked: true,
      series: {
        0: {
          targetAxisIndex: 1
        },
        1: {
          targetAxisIndex: 2
        }
      }
    };

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

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

편집하다

코어 차트를 사용하는 것도 또 다른 옵션입니다
. 다음 구성 옵션은 차트 를 재질 의 모양과 느낌에 가깝게 만듭니다.

theme: 'material'

그러나 핵심 차트는 재료 와 동일하게 그룹화되지 않습니다.

따라서
간격을위한 행을 포함 하여 데이터 내에서 수동으로 그룹을 만들어야합니다.

마지막 색상을 자동으로 조정하지도 않습니다.

다음 작업 스 니펫 참조 ...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Branch Office', 'DataSet 1', 'DataSet 2', 'DataSet 3-0', 'DataSet 3-1', 'DataSet 3-2', 'DataSet 3-3', 'DataSet 3-4'],
      [' ', 400, null, null, null, null, null, null],
      ['Chicago', null, 500, null, null, null, null, null],
      [' ', null, null, 200, 200, 200, 200, 200],
      [' ', null, null, null, null, null, null, null],
      [' ', 400, null, null, null, null, null, null],
      ['New York', null, 500, null, null, null, null, null],
      [' ', null, null, 200, 200, 200, 200, 200],
      [' ', null, null, null, null, null, null, null],
      [' ', 400, null, null, null, null, null, null],
      ['Seattle', null, 500, null, null, null, null, null],
      [' ', null, null, 200, 200, 200, 200, 200],
      [' ', null, null, null, null, null, null, null],
      [' ', 400, null, null, null, null, null, null],
      ['Average', null, 500, null, null, null, null, null],
      [' ', null, null, 200, 200, 200, 200, 200],
    ]);

    var options = {
      colors: ['#1b9e77', '#d95f02', '#4a148c', '#7b1fa2', '#9c27b0', '#ba68c8', '#e1bee7'],
      bar: {
        groupWidth: '90%'
      },
      hAxis: {
        format: 'decimal'
      },
      height: 400,
      isStacked: true,
      theme: 'material'
    };

    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  },
  packages: ['corechart']
});

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

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-14

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

세 가지 데이터 세트에 대한 누적 막대 차트를 만드는 방법은 무엇입니까?

세 가지 데이터 세트에 대한 누적 막대 차트를 만드는 방법은 무엇입니까?

누적 막대 차트의 각 세그먼트에 주석을 추가하는 방법은 무엇입니까?

MS Excel에서 누적 세로 막 대형 차트 데이터 레이블을 세로로 배치 / 배치하는 방법은 무엇입니까?

누적 세로 막 대형 차트에 총 추가 데이터를 표시하는 방법

누적 세로 막 대형 차트를 효율적으로 쿼리하는 방법은 무엇입니까?

Plotly : Plotly Express 막대 차트로 여러 데이터 세트를 사용하는 방법은 무엇입니까?

훈련 데이터 세트에 대한 선형 회귀 결과를 테스트 데이터 세트에 적용하는 방법은 무엇입니까?

긴 데이터 프레임 형식에서 ggplot에서 누적 막대 차트를 만드는 방법은 무엇입니까?

R- 패키지에 대한 데이터 세트를 문서화하는 방법은 무엇입니까?

Excel에서 누적 세로 막 대형 차트를 오름차순으로 정렬하는 방법은 무엇입니까?

ggplot2의 막대 차트에 세 번째 변수를 추가하는 방법은 무엇입니까?

개별 열기 / 닫기 상태를 포함하는 데이터 프레임에 대한 누적 막대 그림을 만드는 방법은 무엇입니까?

matplotlib에서 누적 막대 차트를 만드는 방법은 무엇입니까?

큰 데이터 세트에서 대화 형 그래프를 만드는 방법은 무엇입니까?

시리즈 데이터 외에 하이 차트의 세로 막 대형 차트 위에 마우스를 올려 놓으면 사용자 지정 데이터를 표시하는 방법은 무엇입니까?

Google 막대 차트 라벨링 동적 데이터. 라벨을 추가하는 방법은 무엇입니까?

유사한 캐릭터에 대한 데이터 세트를 결합하는 방법은 무엇입니까?

Pandas : 대규모 데이터 세트에서 누락 된 값을 채우는 방법은 무엇입니까?

d3.js 누적 막대 차트는 한 데이터 세트에 대해 작동하지만 다른 데이터 세트에는 작동하지 않습니다.

누적 막대 차트를 가로로 표시하는 방법은 무엇입니까?

R에있는 작은 데이터 세트의 누적 막대 그래프

R에서 SF 사용-대형 포인트 데이터 세트에 지오메트리를 추가하는 가장 좋은 방법은 무엇입니까?

Excel에서 데이터 요소로 막대 차트를 만드는 방법은 무엇입니까?

누적 막대 차트에서 두 개의 가로 막대 사이에 텍스트를 삽입하는 방법

대규모 데이터 세트 (2 억 x 2 변수)에 대해 로지스틱 회귀를 실행하는 효율적인 방법은 무엇입니까?

데이터를 필터링하고 D3.js 누적 막대 차트를 채우는 방법은 무엇입니까?

동적 데이터가있는 세로 막 대형 차트를 만들려면 어떻게해야합니까?

Plotly in R : 시계열 데이터에서 누적 막대 차트를 그려 백분율 구성을 표시하는 방법은 무엇입니까?

JSON 데이터를 사용하여 JasperReports 막대 차트를 만드는 방법은 무엇입니까?

녹은 데이터가있는 highcharter의 누적 막대 차트