每当Google发布图表库的主要版本时,事情就会发生。以下代码大约3年前实施,并且工作了几年,并在去年内打破了这种方式
我填充数据表并使用此代码格式化数字
var formatter = new google.visualization.NumberFormat({pattern:'#,###.##'});
var cl = jsonChartData.rows[0].c.length;
for (var c=0;c<cl;c++) {
if (jsonChartData.cols[c].type == 'number'){
formatter.format(popDataTable, c);
}
}
并且效果很好并产生如下结果:v: 6155177.2549019605, f: '6,155,177.25'
此处的文档Google Table Chart,此处Generic formatters以及ICU 58.1
支持我使用以下代码填充传递给图表对象的视图
var tabOpt = {
width: '100%'
,allowHtml: true
,cssClassNames: {
tableRow: 'chartTabRow'
,oddTableRow: 'chartTabRow'
,headerRow: 'chartHeadRow'
,tableCell: 'chartTabRow'
,headerCell: 'chartHeadRow'
}
};
var wdt = popDataTable;
wdt.sort([
{column: colID(wdt, 'sumlev')}
,{column: colID(wdt, 'estyear')}
,{column: colID(wdt, 'estdata')}
,{column: popFactCol, desc: true}]);
dView = new google.visualization.DataView(wdt);
dView.setRows(dView.getFilteredRows([
{column: colID(dView, 'sumlev'), value: '010'}
,{column: colID(dView, 'estdata'), value: popFact}
,{column: colID(dView, 'estyear'), value: popFactYear}]));
var jsonPopParams = {
"cols":
[
{"id":"","label":"Parameter(N)","pattern":"","type":"string"},
{"id":"","label":"Value","pattern":"","type":"number"}
]
,
"rows":
[
{"c":
[
{"v":"N","f":null},
{"v":0,"f":null}
]
},
{"c":
[
{"v":"Sum","f":null},
{"v":0,"f":null}
]
},
{"c":
[
{"v":"Min","f":null},
{"v":0,"f":null}
]
},
{"c":
[
{"v":"Max","f":null},
{"v":0,"f":null}
]
},
{"c":
[
{"v":"Range","f":null},
{"v":0,"f":null}
]
},
{"c":
[
{"v":"Mean","f":null},
{"v":0,"f":null}
]
},
{"c":
[
{"v":"Median","f":null},
{"v":0,"f":null}
]
},
{"c":
[
{"v":"Variance","f":null},
{"v":0,"f":null}
]
},
{"c":
[
{"v":"Standard Dev","f":null},
{"v":0,"f":null}
]
},
{"c":
[
{"v":"Skewness","f":null},
{"v":0,"f":null}
]
},
{"c":
[
{"v":"Kurtosis","f":null},
{"v":0,"f":null}
]
}]
,
"p":null
};
jsonPopParams.rows[0].c[1].f = dView.getFormattedValue(0, colID(dView, 'pn'));
jsonPopParams.rows[1].c[1].f = dView.getFormattedValue(0, colID(dView, 'psum'));
jsonPopParams.rows[2].c[1].f = dView.getFormattedValue(0, colID(dView, 'pmin'));
jsonPopParams.rows[3].c[1].f = dView.getFormattedValue(0, colID(dView, 'pmax'));
jsonPopParams.rows[4].c[1].f = dView.getFormattedValue(0, colID(dView, 'prange'));
jsonPopParams.rows[5].c[1].f = dView.getFormattedValue(0, colID(dView, 'pmean'));
jsonPopParams.rows[6].c[1].f = dView.getFormattedValue(0, colID(dView, 'pmedian'));
jsonPopParams.rows[7].c[1].f = dView.getFormattedValue(0, colID(dView, 'pvariance'));
jsonPopParams.rows[8].c[1].f = dView.getFormattedValue(0, colID(dView, 'pstndev'));
jsonPopParams.rows[9].c[1].f = dView.getFormattedValue(0, colID(dView, 'pskew'));
jsonPopParams.rows[10].c[1].f = dView.getFormattedValue(0, colID(dView, 'pkurt'));
var tblChart = new google.visualization.Table(document.getElementById(paramDiv));
wdt = new google.visualization.DataTable(jsonPopParams);
var tblView = new google.visualization.DataView(wdt);
tblChart.draw(tblView, tabOpt);
设置断点并逐步执行每条指令,我可以看到格式化值正在JSON对象jsonPopParams中填充。
例如,pmean的格式值为'6,155,177.25'
呈现图表时,格式中包含逗号的任何值都会显示NaN。
I created a working pared down example in JS Fiddle here:
在那里我测试了三个场景
格式化的值没有使用###.##
的逗号和2位小数view.getFormattedValue
并生成6,155,177.25这当然是可以解决的问题
格式化的值使用逗号和2位小数#,###.##
使用view.getFormattedValue
并生成NaN现在正在做什么
格式化的值有逗号和2位小数,但使用view.getValue
并生成6,155,177.255,默认的低位位置必须为3 ...它可以工作但不符合规范。
所以我不确定是否
1)我之前做错了并且逃脱了它现在谷歌修复了根本原因,现在我的错误代码不再工作
OR
2)谷歌破坏了一些东西,现在我的正确代码不再有用了。
希望第二组具有全新视角的眼睛可以看到。
任何帮助将不胜感激。感谢
答案 0 :(得分:1)
问题似乎是这些问题......
jsonPopParams.rows[0].c[1].v = dView.getFormattedValue(0, colID(dView, 'pn'));
jsonPopParams.rows[1].c[1].v = dView.getFormattedValue(0, colID(dView, 'psum'));
....
使用格式化的值(v
)
f
)
所以它应该是......
jsonPopParams.rows[0].c[1].f = dView.getFormattedValue(0, colID(dView, 'pn'));
或......
jsonPopParams.rows[0].c[1].v = dView.getValue(0, colID(dView, 'pn'));
或两者......
jsonPopParams.rows[0].c[1].v = dView.getValue(0, colID(dView, 'pn'));
jsonPopParams.rows[0].c[1].f = dView.getFormattedValue(0, colID(dView, 'pn'));
在这里创建DataTable时......
var tblChart = new google.visualization.Table(document.getElementById(paramDiv));
wdt = new google.visualization.DataTable(jsonPopParams);
....
正在使用字符串而不是数字,
因为列类型是数字 - &gt; {"id":"","label":"Value","pattern":"","type":"number"}
返回NaN