谷歌圖表逗號分隔，而採用了棱角分明的指令

我使用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:','  
     } 
    },

感謝您的回答

來源

2016-02-26 Alex

從你在哪裏得到你的''提示data'？ –

你必須定義你的formatters您要設置格式每一列：

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

請注意angular-google-chart指令所需的語法：如documentation中所述，您必須使用縮短名稱以引用Google圖表格式化程序（即number而不是NumberFormat）。

下面是3個不同的數字格式化一個完整的例子：

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; 
 
});

<!DOCTYPE html> 
 
<html ng-app='myApp'> 
 
<head> 
 
    <script src="http://code.angularjs.org/1.4.9/angular.js"></script> 
 
    <script src="script.js"></script> 
 
    <script src="http://bouil.github.io/angular-google-chart/ng-google-chart.js"></script> 
 
</head> 
 

 
<body ng-controller="MainCtrl"> 
 
    <div google-chart chart="test"> 
 
    </div> 
 
    <h2>JSON:</h2> 
 
    <pre style='clear:both; background-color: lightgray;'>{{test|json}}</pre> 
 
</body> 
 
</html>

來源

2016-03-01 14:31:26 beaver

谷歌圖表逗號分隔，而採用了棱角分明的指令

回答

相關問題