developer tip

Google Charts API에서 하드 최소 축 값 설정

optionbox 2020. 12. 30. 08:05
반응형

Google Charts API에서 하드 최소 축 값 설정


업타임 및 다운 타임 비율을 누적하여 보여주는 Google 차트를 작성하려고합니다. 이것은 한 가지 작은 점을 제외하고는 훌륭하게 작동합니다. 차트의 기준선은 99.8이고 최대 값은 100입니다. 다운 타임은 일반적으로 .2 미만이므로 차트를 읽을 수 있습니다.

이것은 나에게 충분히 간단 해 보였습니다. 나는 이것이 작동 할 것이라고 생각했다.

var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Uptime');
data.addColumn('number', 'Downtime');
data.addRows([
  ['Dec 1, 1830',   99.875, 0.125],
  ['Dec 8, 1830',   99.675, 0.325],
  ['Dec 15, 1830',  99.975, 0.025],
  ['Dec 22, 1830',  100.0,  0.0]
]);

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, isStacked: true, vAxis: { title: "Percentage Uptime", minValue: 99.8, maxValue: 100}});

불행히도 차트는 vAxis의 minValue를 완전히 무시합니다. API에 따르면 예상되는 동작 인 것 같지만이 경우 질문이 남습니다. 어떻게해야합니까? 데이터를 변환하기까지했습니다. 즉, 모든 가동 시간 값에서 99.8을 빼고 차트를 0에서 .2로 바꾸면 괜찮아 보이는 그래프가 표시되지만 적용 할 수 없습니다. 99.8, 99.85, 99.9라고하는 수직축에 라벨을 붙이는 것입니다. 축은 매우 충실하게 말하면, 하단에 0, 상단에 .2가 있습니다.이 방향도 고칠 방법이없는 것 같습니다. 어느 솔루션이든 허용 가능할 것입니다.이 작업을 수행 할 수있는 방법이 있습니까?


다음과 같이 viewWindow를 설정해야합니다.

var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Uptime');
data.addColumn('number', 'Downtime');
data.addRows([
 ['Dec 1, 1830',   99.875, 0.125],
  ['Dec 8, 1830',   99.675, 0.325],
  ['Dec 15, 1830',  99.975, 0.025],
  ['Dec 22, 1830',  100.0,  0.0]

]);

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data,
           {width: 400, 
            height: 240, 
            isStacked: true,
            vAxis: { 
              title: "Percentage Uptime", 
              viewWindowMode:'explicit',
              viewWindow:{
                max:100,
                min:99.8
              }
            }
            }                 
          );

// 최신 버전의 api 용으로 편집 됨


비슷한 문제가있어서 속성을 "minValue"가 아닌 "min"으로 지정해야했습니다.

vAxis: { 
    viewWindowMode:'explicit',
    viewWindow: {
        max:100,
        min:99.8
    }
}

ReferenceURL : https://stackoverflow.com/questions/6359935/setting-a-hard-minimum-axis-value-in-google-charts-api

반응형