谷歌图表使用角度指令

Question

我正在使用Google-chart angular directive

这些是我的选择：

$scope.test.options = {
    title: '',
    isStacked:true,
    crosshair: { trigger: 'both' },
    lineWidth: 1,
    height: 300,
    tooltip: {isHtml: true},
    animation:{
        duration: 1000,
        easing: 'out'
    },
    vAxis: { 
        title:"Revenue"
    },
    series: {
        0:{color:'#A4FF4D'},
        1:{color:'#99742E'},
        2:{color:'#FF4D5A'},
        3:{color:'#519bff'},
        4:{color:'#4DFFEA'}
    }
};

工具提示未格式化

我希望格式化工具提示中的数字。

我尝试在选项中添加格式化程序，但它不起作用：

    formatters: {
        NumberFormat:{
            groupingSymbol:','    
        }
    },

感谢您的回答

Answer 1

您必须为要格式化的每列定义formatters：

var formatters = {
    number: [{
      columnNum: 1,
      groupingSymbol: ',',
      decimalSymbol: '.'
    },{
      columnNum: 2,
      pattern: "$ #,##0.00"
    },{
      columnNum: 3,
      pattern: "#,###%"
    }]
};

请注意angular-google-chart指令所需的语法：如documentation中所述，您必须使用缩短的名称来引用Google Chart格式化程序（即{{ 1}}而不是number）。

这是一个包含3个不同数字格式器的完整示例：

NumberFormat

var app = angular.module('myApp', ['googlechart']);

app.controller('MainCtrl', function($scope) {

  $scope.test = {
    type: 'AreaChart'
  };
  var data = [
    ['Country', '2013', '2014', 'delta'],
    ['Germany', 25552, 23000, 0],
    ['United States', 34434, 11000, 0],
    ['Brazil', 33342, 90001, 0],
    ['Canada', 52227, 30020, 0],
    ['France', 6444, 29000, 0],
    ['Italy', 75552, 33000, 0]
  ];
  var formatters = {
    number: [{
      columnNum: 1,
       groupingSymbol: ',',
      decimalSymbol: '.'
    },{
      columnNum: 2,
      pattern: "$ #,##0.00"
    },{
      columnNum: 3,
      pattern: "#,###%"
    }]
  };
  $scope.test.formatters = formatters;
  $scope.test.options = {
    title: '',
    isStacked: true,
    crosshair: {
      trigger: 'both'
    },
    lineWidth: 1,
    height: 300,

    animation: {
      duration: 1000,
      easing: 'out'
    },
    vAxes: {0: {title: 'Revenues', format: '#,### $'}, 1: {title: 'Percent', format: '#%'}},
    tooltip: {isHtml: true},
    series: {
      0: {
        color: '#FF0000', targetAxisIndex: 0 
      },
      1: {
        color: '#00FF00', targetAxisIndex: 0 
      },
      2: {
        color: '#0000FF', targetAxisIndex: 1, type: "line"
      }
    }
  };

  for (var i=1; i<data.length; i++) {
    data[i][3]=data[i][2]/data[i][1]-1;
  }
  

  $scope.test.data = data;
});