Javascript 在 Google Charts API 中设置硬最小轴值

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6359935/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 21:24:51  来源:igfitidea点击:

Setting a hard minimum axis value in Google Charts API

javascriptgoogle-visualization

提问by jasonpgignac

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.

我正在尝试构建一个谷歌图表来显示一些正常运行时间和停机时间百分比,堆叠。这很有效,除了一件小事 - 我希望图表的基线为 99.8,最大值为 100 - 因为停机时间通常小于 0.2,这将使图表可读。

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?

不幸的是,图表完全忽略了 vAxis 上的 minValue。根据 API,这似乎是预期的行为,但这留下了一个问题 - 我将如何实现这一点?我什至对数据进行了转换 - 即,从所有正常运行时间值中减去 99.8,然后将图表从 0 变为 0.2,这会生成一个看起来不错的图表,但我无法应用垂直轴的标签会说 99.8、99.85、99.9,无论如何 - 轴非常忠实地表示,底部为 0,顶部为 0.2,而且似乎也没有办法在这个方向上修复它。任何一种解决方案都是可以接受的,我确定有某种方法可以使这项工作发挥作用?

回答by Nikes

you need to set viewWindow like this:

你需要像这样设置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
              }
            }
            }                 
          );

//edited for newer version of api

//为较新版本的api编辑

回答by Ahmad Abdelghany

I had a similar problem and had to specify the property as "min" not "minValue"

我有一个类似的问题,必须将属性指定为“min”而不是“minValue”

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