谷歌图表垂直轴和工具提示值格式 [英] google chart vertical axis and tooltip value formatting

问题描述

我有一张显示我房间压力值的谷歌图表。图表有几个问题

< img src =https://i.stack.imgur.com/QTOjI.jpgalt =在这里输入图片描述>

• 垂直轴重复其值，例如我需要垂直值为95535 95537 95539.但我得到的值是95K 95K 95K作为轴值


• 当我们将鼠标悬停在行上时具有相同的效果


• 当我添加代码以使我的点更大（pointSize）时，即使没有任何效果

然而图表行的行为好像它是正确的，因为我的意思是它有一些起伏。

我添加了NumberFormat格式化程序，但

您如何正确设置vAxis和工具提示？

这里是我使用的代码

 < script type =text / javascript> 
 google.load（'visualization'，'1.1'，{packages：['line']}）; 
 google.setOnLoadCallback（drawChart）; 
 
函数drawChart（）{
 
 var data = new google.visualization.DataTable（）; 
 data.addColumn（'datetime'，'Timestamp'）; 
 data.addColumn（'数字'，'压力'）; 
 
 data.addRows（[
 [new Date（'2015-11-19 18:26:05'），95245]，[new Date（'2015-11-19 18： [新日期（'2015-11-19 18:19:06'），95186]，[新日期（'2015-11-19 18:12:05'，95152] ，[new Date（'2015-11-19 18:05:53'），95151]，[new Date（'2015-11-19 17:58:04'），95172]，[new Date（'2015- 11-19 17:51:04'），95152]，[new Date（'2015-11-19 17:44:04'），95141]，[new Date（'2015-11-19 17:37:04 '），95111]，[new Date（'2015-11-19 17:30:04'），95102]，[new Date（'2015-11-19 17:26:04'），95112]，[new日期（'2015-11-19 17:19:05'），95064]，[新日期（'2015-11-19 17:12:04'），95042]，[新日期（'2015-11-19 '），95027]，[new Date（'2015-11-19 16:58:04'），95032]，[new Date（'2015-11-19 16:51:04'）， 95045]，[新日期（'2015-11-19 16:37:05'），95016]，[新日期（'2015-11-19 16:44:05'），95042] '），94990]，[新日期（'2015-11-19 16:26:04'），94995]，[新日期（'2015-11-19 16:19 ：04'），94985]，[新日期（'2015-11-19 1 ''，94969]，[新日期（'2015-11-19 16:05:04'），94955]，[新日期（'2015-11-19 15:58:04'）， 94949]，[新日期（'2015-11-19 14:50:18'），94987]]）; 
 
 var options = {
图表：{
 title：'abasingama_a1'，
 subtitle：'Unit  -  Pa'，
 pointSize：30 
 $，
 width：800，
 height：300，
 vAxis：{minValue：95450，maxValue：95550}，
 pointSize：30，
}; 
 
 var chart = new google.charts.Line（document.getElementById（'line_top_x'））; 
 var formatter = new google.visualization.NumberFormat（{pattern：'0.0e00'}）; 
 formatter.format（data，1）; 
 
 chart.draw（data，options）; 
} 
< / script> 
  

解决方案

您需要将选项转换为 google.charts.Line.convertOptions 在图表的绘图中。

  chart.draw（data，options）; 
  

应该是

  chart.draw（data，google.charts.Line.convertOptions（options））; 
  

然后它会像您期望的那样工作。

我会尝试使用 vAxis：{minValue：95450，maxValue：95550，format：'decimal'} 来实现您要查找的内容。

I have a google-chart which displays the pressure values of my room. Chart has several problems in it

• Vertical axis repeats its values, say i need vertical values at 95535 95537 95539. but all i get is 95K 95K 95K as axis values
• Tooltip when we hover over the line has the same effect
• When i add the code to make my points bigger (pointSize) that even doesn't have any effect

However charts line acts as if it is correct, by that i meant it has some ups and downs.

I added NumberFormat formatters but what ever I do the chart doesn't change.

How do you format the vAxis and tooltips correctly?

here is the code i am using

<script type="text/javascript">
      google.load('visualization', '1.1', {packages: ['line']});
      google.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('datetime', 'Timestamp');
        data.addColumn('number', 'pressure');

        data.addRows([
            [new Date('2015-11-19 18:26:05'),95245],[new Date('2015-11-19 18:19:07'),95186],[new Date('2015-11-19 18:19:06'),95186],[new Date('2015-11-19 18:12:05'),95152],[new Date('2015-11-19 18:05:53'),95151],[new Date('2015-11-19 17:58:04'),95172],[new Date('2015-11-19 17:51:04'),95152],[new Date('2015-11-19 17:44:04'),95141],[new Date('2015-11-19 17:37:04'),95111],[new Date('2015-11-19 17:30:04'),95102],[new Date('2015-11-19 17:26:04'),95112],[new Date('2015-11-19 17:19:05'),95064],[new Date('2015-11-19 17:12:04'),95042],[new Date('2015-11-19 17:05:04'),95027],[new Date('2015-11-19 16:58:04'),95032],[new Date('2015-11-19 16:51:04'),95045],[new Date('2015-11-19 16:44:05'),95042],[new Date('2015-11-19 16:37:05'),95016],[new Date('2015-11-19 16:30:05'),94990],[new Date('2015-11-19 16:26:04'),94995],[new Date('2015-11-19 16:19:04'),94985],[new Date('2015-11-19 16:12:04'),94969],[new Date('2015-11-19 16:05:04'),94955],[new Date('2015-11-19 15:58:04'),94949],[new Date('2015-11-19 14:50:18'),94987]            ]);

        var options = {
                        chart: {
                          title: 'abasingama_a1',
                          subtitle: 'Unit - Pa',
                          pointSize: 30
                        },
                        width: 800,
                        height: 300,
                        vAxis: { minValue: 95450, maxValue: 95550 },
                        pointSize: 30,
                      };

        var chart = new google.charts.Line(document.getElementById('line_top_x'));
        var formatter = new google.visualization.NumberFormat({pattern:'0.0e00'});
        formatter.format(data, 1);

        chart.draw(data, options);
      }
    </script>

解决方案

You need to convert your options with google.charts.Line.convertOptions in the drawing of your chart.

chart.draw(data, options);

should be

chart.draw(data, google.charts.Line.convertOptions(options));

And then it'll work like you expect it.
I would try with vAxis: { minValue: 95450, maxValue: 95550, format:'decimal'} to achieve what you're looking for.

这篇关于谷歌图表垂直轴和工具提示值格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！