谷歌图表中的柱状图显示在最小值下面

Column chart in Google Chart displays bar below min

本文关键字：最小值显示谷歌更新时间：2023-09-26

好的，我一直在寻找类似于我在网上遇到的问题，但是我不能，所以我决定在这里询问一些建议来解决我的问题。

我正在使用Angular谷歌图表，并试图创建一个柱状图来显示投资组合总数的历史值。

创建图表

           $scope.createPortfolioBalanceChart = function(){
                var data = JSON.parse($scope.portfolioChartData.rows.toJSON());
                console.log(JSON.stringify($scope.portfolioChartData).replace(/''/g,''));
                var minValue = _.reduce(data.rows, function(memo, bal){ 
                    var value = bal.c[1].v;
                    return (value !== null && value < memo) ? value : memo;
                }, Number.MAX_SAFE_INTEGER);
                var maxValue = _.reduce(data.rows, function(memo, bal){ 
                    var value = bal.c[1].v;
                    return value > memo ? value : memo;
                }, Number.MIN_SAFE_INTEGER);
                var rangeBleed = (maxValue - minValue) * PortfolioBalanceChartConfig.rangeBleedPadding;
                var chart = {};
                chart.type = 'ColumnChart';
                chart.data = data;
                chart.options = {
                    'height': 300,
                    'fill': 20,
                    isStacked: false,
                    'vAxis':{
                        'baselineColor': 'none',
                        'gridlineColor': 'none',
                        'format': '$#,###',
                        'position': 'right',
                        'viewWindow' : {
                            'min': rangeBleed > 0 ? minValue - rangeBleed : 0, // if the range is 0 then start the graph from 0
                            'max': maxValue + rangeBleed
                        }
                    },
                    'displayExactValues': true,
                    'tooltip' : {
                        'trigger': true
                    },
                    'legend': { 
                        'position': 'none' 
                    },
                    'bar': {
                        'groupWidth': 30
                    },
                    'colors': ['#33b4e6', '#0675c2'],
                };
                chart.formatters = {
                    number : [{
                        columnNum: 1,
                        pattern: '$ #,##0.00'
                    },
                    {
                        columnNum: 2,
                        pattern: '$ #,##0.00'
                    }]
                };
                $scope.portfolioBalanceChart = chart;
            };

注意:上面的minValue和maxValue是用来给图表数据添加填充的。

美元scope.portfolioChartData

{
  "rows": {
    "cols": [
      {
        "label": "Period",
        "type": "string"
      },
      {
        "label": "Balance",
        "type": "number"
      },
      {
        "role": "style",
        "type": "string",
        "p": {
          "role": "style"
        }
      }
    ],
    "rows": [
      {
        "c": [
          {
            "v": "Mar 2015"
          },
          {
            "v": 68484.43
          },
          {
            "v": ""
          }
        ]
      },
      {
        "c": [
          {
            "v": "Apr 2015"
          },
          {
            "v": 68484.43
          },
          {
            "v": ""
          }
        ]
      },
      {
        "c": [
          {
            "v": "May 2015"
          },
          {
            "v": 68484.43
          },
          {
            "v": ""
          }
        ]
      },
      {
        "c": [
          {
            "v": "Jun 2015"
          },
          {
            "v": 68484.43
          },
          {
            "v": ""
          }
        ]
      },
      {
        "c": [
          {
            "v": "Jul 2015"
          },
          {
            "v": 68484.43
          },
          {
            "v": ""
          }
        ]
      },
      {
        "c": [
          {
            "v": "Today"
          },
          {
            "v": 600000
          },
          {
            "v": ""
          }
        ]
      }
    ]
  },
  "cols": [
    {
      "label": "axis",
      "type": "string"
    },
    {
      "label": "Portfolio",
      "type": "number"
    }
  ]
}

stackoverflow阻止我发布图像，所以这里是上面构建的图表的示例图像:

http://postimg.org/image/gtnq81au3/

好了，我终于解决了这个问题。似乎有一些属性隐藏在谷歌图表文档，使您能够设置什么应该是基线。这与viewWindow不同。最小值是多少。我把它添加到viewWindow属性下面。

            $scope.createPortfolioBalanceChart = function(){
                var data = JSON.parse($scope.portfolioChartData.rows.toJSON());
                var minValue = _.reduce(data.rows, function(memo, bal){ 
                    var value = bal.c[1].v;
                    return (value !== null && value < memo) ? value : memo;
                }, Number.MAX_SAFE_INTEGER);
                var maxValue = _.reduce(data.rows, function(memo, bal){ 
                    var value = bal.c[1].v;
                    return value > memo ? value : memo;
                }, Number.MIN_SAFE_INTEGER);
                var rangeBleed = (maxValue - minValue) * PortfolioBalanceChartConfig.rangeBleedPadding;
                var chart = {};
                chart.type = 'ColumnChart';
                chart.data = data;
                chart.options = {
                    'height': 300,
                    'fill': 20,
                    isStacked: false,
                    'vAxis':{
                        'baselineColor': 'none',
                        'gridlineColor': 'none',
                        'format': '$#,###',
                        'position': 'right',
                        'viewWindow' : {
                            'min': rangeBleed > 0 ? minValue - rangeBleed : 0, // if the range is 0 then start the graph from 0
                            'max': maxValue + rangeBleed
                        },
                        'baseline': rangeBleed > 0 ? minValue - rangeBleed : 0 // set to be the same as min to prevent bar overlapping label below it
                    },
                    'displayExactValues': true,
                    'tooltip' : {
                        'trigger': true
                    },
                    'legend': { 
                        'position': 'none' 
                    },
                    'bar': {
                        'groupWidth': 30
                    },
                    'colors': ['#33b4e6', '#0675c2'],
                };
                chart.formatters = {
                    number : [{
                        columnNum: 1,
                        pattern: '$ #,##0.00'
                    },
                    {
                        columnNum: 2,
                        pattern: '$ #,##0.00'
                    }]
                };
                $scope.portfolioBalanceChart = chart;
            };