Столбчатая диаграмма в Google Chart отображает панель ниже мин

0

Хорошо, я искал что-то похожее на то, что я испытываю в Интернете, но я не могу, поэтому решил обратиться за советом к решению моей проблемы.

Я использую диаграмму 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"
    }
  ]
}

stackoverflow препятствует мне отправить изображение, поэтому здесь образец изображения построенной диаграммы:

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

  • 0
    У вас есть вопрос или проблема с приведенным выше кодом, с которым вам нужна помощь?
  • 0
    эй, у меня есть некоторые проблемы с кодом выше. Если вы видите скриншот, который я разместил в ссылке, то панель перекрывает метку на оси х ... довольно странно.
Показать ещё 2 комментария
Теги:
charts
google-visualization

1 ответ

0
Лучший ответ

Хорошо, я решил проблему наконец. Кажется, что некоторые свойства скрываются в документах диаграммы 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;

            };
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню