如何更改Google图表中显示的数字格式? [英] How to change format of the number displayed in Google Chart?
本文介绍了如何更改Google图表中显示的数字格式?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个绘制以下图表的代码:
I have a code that draws the following chart:
有什么方法可以将堆栈中的数字格式更改为数百万,因为这些是货币.在绘制图表时,已使用选项中的格式:短"标签将轴格式化为数百万个.
Is there any way by which I can change the number format within the stacks to millions as those are currency. The axis has been formatted to millions using the "format: short" tag within the options while drawing the chart.
我基本上有一个javascript函数,该函数返回一个JSON,该JSON具有用于绘制图表的值.javascript函数如下:
I basically have a javascript function which returns a JSON having the values using which I draw the chart. The javascript function is given below:
<script>
google.load('visualization', '1', {packages: ['corechart', 'bar', 'table']});
google.setOnLoadCallback(loadcharts);
var dept= 'General Ward';
function drawBasic() {
var abc = $.ajax({url:'kpi23.php?dept='+dept,async:false,dataType:"json",}).responseText;
var data = new google.visualization.DataTable(abc);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ //calc: "stringify",
sourceColumn: 1,
type: "number",
role: "annotation" },2,
{ //calc: "stringify",
sourceColumn: 2,
type: "number",
role: "annotation" },3,
{ //calc: "stringify",
sourceColumn: 3,
type: "number",
role: "annotation" },4,
{// calc: "stringify",
sourceColumn: 4,
type: "number",
role: "annotation" },5,
{ //calc: "stringify",
sourceColumn: 5,
type: "number",
role: "annotation" },
{ //calc: "stringify",
sourceColumn: 6,
type: "number",
role: "annotation" }]);
var options = {
chart: {
title: 'Footfall by Day of Week'
},
annotations: {
textStyle: {
fontSize: 10,
//opacity: 0.8 // The transparency of the text.
}
},
//width: 1200,
height: 400,
//hAxis : {textStyle : {fontSize: 9}},
series: {
0:{color:'#083874'},
1:{color:'#94CAFC'},
2:{color:'#EBBA25'},
3:{color:'#F59E47'},
4:{color:'#9A9FA2'},
},
vAxis: {title: "Revenue",titleTextStyle: {italic: false},gridlines: { color: 'transparent'},viewWindowMode: "explicit", viewWindow:{ min: 0 }, format: 'short'},
hAxis: {title: "Month",titleTextStyle: {italic: false},gridlines: { color: 'transparent'} },
//chartArea: {left:90, width: 1000},
//chartArea: {'width': '90%', 'height': '80%'},
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '70%' },
isStacked: true,
};
var chart = new google.visualization.ColumnChart(
document.getElementById('chart_div'));
chart.draw(view, options);
}
推荐答案
You can use a Number Formatter
See following example...
google.charts.load("44", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable({
"cols":[
{"label":"Month","type":"string"},
{"label":"Day Care","type":"number"},
{"label":"Semi Private","type":"number"},
{"label":"General Ward","type":"number"},
{"label":"ICU","type":"number"},
{"label":"Private","type":"number"},
{"label":"Suite","type":"number"}
],
"rows":[
{"c":[{"v":"FEB"},{"v":29023.47},{"v":541438.55},{"v":442690.4},{"v":394919.81},{"v":497903.68},{"v":198755.42}]},
{"c":[{"v":"JAN"},{"v":29023.47},{"v":541438.55},{"v":442690.4},{"v":394919.81},{"v":497903.68},{"v":198755.42}]},
{"c":[{"v":"DEC"},{"v":29023.47},{"v":541438.55},{"v":442690.4},{"v":394919.81},{"v":497903.68},{"v":198755.42}]},
{"c":[{"v":"NOV"},{"v":29023.47},{"v":541438.55},{"v":442690.4},{"v":394919.81},{"v":497903.68},{"v":198755.42}]}
]
});
var formatter = new google.visualization.NumberFormat({
pattern: 'short'
});
formatter.format(data, 1);
formatter.format(data, 2);
formatter.format(data, 3);
formatter.format(data, 4);
formatter.format(data, 5);
formatter.format(data, 6);
var view = new google.visualization.DataView(data);
view.setColumns([0,
1, {calc: "stringify", sourceColumn: 1, type: "string", role: "annotation"},
2, {calc: "stringify", sourceColumn: 2, type: "string", role: "annotation"},
3, {calc: "stringify", sourceColumn: 3, type: "string", role: "annotation"},
4, {calc: "stringify", sourceColumn: 4, type: "string", role: "annotation"},
5, {calc: "stringify", sourceColumn: 5, type: "string", role: "annotation"},
6, {calc: "stringify", sourceColumn: 6, type: "string", role: "annotation"}
]);
var options = {
chart: {
title: 'Footfall by Day of Week'
},
annotations: {
textStyle: {
fontSize: 10
}
},
height: 400,
series: {
0:{color:'#083874'},
1:{color:'#94CAFC'},
2:{color:'#EBBA25'},
3:{color:'#F59E47'},
4:{color:'#9A9FA2'}
},
vAxis: {title: "Revenue", titleTextStyle: {italic: false}, gridlines: {color: 'transparent'}, viewWindowMode: "explicit", viewWindow: {min: 0}, format: 'short'},
hAxis: {title: "Month", titleTextStyle: {italic: false}, gridlines: {color: 'transparent'}},
legend: {position: 'top', maxLines: 3},
bar: {groupWidth: '70%'},
isStacked: true
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values" style="width: 900px; height: 300px;"></div>
这篇关于如何更改Google图表中显示的数字格式?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文