Question

我正在尝试构建一个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，似乎无法修正此方向。这两种解决方案都是可以接受的，我确信有一些方法可以使这项工作成功吗？

Answer 1

你需要像这样设置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编辑

Answer 2

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

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

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

2 个答案: