Google 图表中的柱形图显示低于最小值的条形图

Question

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

我正在使用 Angular Google 图表并尝试创建一个柱形图来显示投资组合总计的历史值。

创建图表的代码

           $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"
    }
  ]
}

Whosebug 阻止我 post 图片，所以这里是上面构建的图表的示例图片：

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

Answer 1

好的，我终于解决了这个问题。 google 图表文档中似乎隐藏了一些属性，使您能够设置基线。这与 viewWindow.min 不同。我把它添加到 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;

            };

Google 图表中的柱形图显示低于最小值的条形图

Column chart in Google Chart displays bar below min

javascript

charts

google-visualization

angularjs