在Google Charts API中设置硬最小轴值 [英] Setting a hard minimum axis value in Google Charts API

问题描述

我试图建立一个Google图表来显示一些正常运行时间和停机时间的百分比。除了一件小事情之外，这很有用 - 我希望图表的基线为99.8，最大为100，因为停机时间通常小于0.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变为0.2，并且此图形显示出看起来没问题的图形，但我无法应用将标签标记为垂直轴，即99.8，99.85，99.9，无论如何 - 该轴在底部显示为0，在顶部显示为0，并且似乎也没有办法修复该方向。任何一种解决方案都是可以接受的，我敢肯定有一些方法可以使这项工作成功吗？

解决方案

你需要像这样设置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正常运行时间，
 viewWindowMode：'explicit'，
 viewWindow：{
 max：100，
 min：99.8 
} 
} 
} 
）; 
  

//为更新版本的api编辑

I'm trying to build a Google Chart to show some uptime and downtime percentages, stacked. This works great except for one small thing - I'd like the baseline of the chart to be at 99.8, and the maximum to be 100 - since downtimes are usually less than .2, this will make the chart readable.

This seemed simple enough to me. I figured this would work:

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}});

Unfortunately, the chart utterly disregards the minValue on the vAxis. This seems to be expected behaviour, according to the API, but this leaves the question - how would I accomplish this? I even went so far as to transform the data - ie, to subtract 99.8 from all the uptime values, and just have the chart go from 0 to .2, and this spits out a graph that looks okay, but I can't apply labels to the vertical axis that would say 99.8, 99.85, 99.9, whatever - the axis says, quite dutifully, 0 at the bottom, and .2 at the top, and there seems to be no way to fix it this directions, either. Either solution would be acceptable, I'm sure there's SOME way to make this work?

解决方案

you need to set viewWindow like this:

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
              }
            }
            }                 
          );

//edited for newer version of api

这篇关于在Google Charts API中设置硬最小轴值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！