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

2019-09-28 11:35:17 阅读：130 来源： 互联网

我正在尝试构建一个Google Chart来显示正常运行时间和停机时间百分比.除了一件小事之外,它的效果很好 – 我希望图表的基线为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编辑

标签：javascript,google-visualization
来源： https://codeday.me/bug/20190928/1827180.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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