【问题标题】:google chart vertical axis and tooltip value formatting谷歌图表垂直轴和工具提示值格式
【发布时间】:2015-11-19 13:07:25
【问题描述】:

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

  • 垂直轴重复其值,假设我需要 95535 95537 95539 ​​处的垂直值。但我得到的只是 95K 95K 95K 作为轴值
  • 当我们将鼠标悬停在线条上时的工具提示具有相同的效果
  • 当我添加代码以使我的点更大(pointSize)甚至没有任何效果时

但是图表线的行为似乎是正确的,我的意思是它有一些起伏。

我添加了 NumberFormat 格式化程序,但我所做的图表并没有改变。

如何正确设置 vAxis 和工具提示的格式?

这是我正在使用的代码

<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>

【问题讨论】:

    标签: javascript jquery charts google-visualization


    【解决方案1】:

    您需要在图表中使用google.charts.Line.convertOptions 转换您的选项。

    chart.draw(data, options);
    

    应该是

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

    然后它会像你期望的那样工作。
    我会尝试使用vAxis: { minValue: 95450, maxValue: 95550, format:'decimal'} 来实现您的目标。

    【讨论】:

    • 这解决了第一个两个问题,但对我来说仍然没有问题,但这不是实际要求,我需要知道这一切:)
    • 您之前说过您尝试添加它。如果您再次添加点,如果您使用google.charts.Line.convertOptions,它们将显示出来
    • 我的错。它应该做,但不会。请参阅此错误/功能请求报告:github.com/google/google-visualization-issues/issues/1922
    • 那没关系,我的工作很棒!!谢谢老兄!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-03-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多