使用带逗号的格式化数值时,Google表格图表编号格式显示NaN

时间:2016-10-22 18:31:41

标签: javascript html google-visualization

每当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)谷歌破坏了一些东西,现在我的正确代码不再有用了。

希望第二组具有全新视角的眼睛可以看到。

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

1 个答案:

答案 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