javascript - 使用带逗号的格式化数值时，Google Table Chart Number Formatting 显示 NaN

Question

每当 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

我使用以下代码填充传递给图表对象的 View

            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:

在那里我测试了三个场景

• 使用 view.getFormattedValue 格式化的值没有逗号和两位小数 ###.## 并生成 6,155,177.25 这当然是解决方法

• 使用 view.getFormattedValue 格式化的值有逗号和 2 位小数 #,###.## 并生成 NaN 它现在正在做什么

• 格式化值有逗号和 2 位小数，但使用 view.getValue 并生成 6,155,177.255，默认低位必须为 3...它可以工作，但不符合规范。

所以我不确定

1) 我之前做错了并且逃脱了，现在谷歌修复了一个根本原因，现在我的错误代码不再工作了

或

2) Google 损坏了一些东西，现在我的正确代码不再工作了。

希望第二组眼光焕然一新。

任何帮助将不胜感激。谢谢

Answer 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'));
....  

value 属性 (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);
....  

正在使用字符串而不是数字，
因为列类型是数字 --> {"id":"","label":"Value","pattern":"","type":"number"}
NaN 被返回