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

标签 javascript google-visualization

我正在尝试构建一个 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 上的最小值。根据 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 进行了编辑

关于javascript - 在 Google Charts API 中设置硬最小轴值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6359935/

相关文章:

javascript - Drupal.attachBehavior 遇到问题

javascript - GetColumnLabel名称并运行ajax函数 - google viz datatable

javascript - 谷歌图表设置网格线颜色

javascript - 无法使用 onclick 函数将选择标签上的值添加到谷歌图表数据表

javascript - 如何从现有的第 3 方控件链接 jQuery 事件?

javascript - Angular `watch` 未按预期运行

javascript - 使用 CSS 或 JavaScript 限制页面大小或限制位置以防止重叠

JavaScript:switch 语句未设置隐藏元素值

javascript - 带有过滤器和 DataView 的 Google 可视化仪表板

javascript - 每个循环中有多个 Google 图表