在 SQl 中格式化数字以通过 Google 图表工具提示栏显示的最佳方法？

Question

我有一个将数据输出到数组中的 SQL 查询，我在谷歌图表中使用它。当数字字段被格式化为原始数字（例如 374000000）时，我的代码中的图表和格式可以正常工作。工具提示正确显示货币和逗号（例如 $374,000,000）。但是，由于我在图表下方包含了表格，因此更难使用。因此，当我在 SQL 中正确格式化数字并将它们显示在表格中（例如 374,000,000）时，谷歌图表工具提示会显示 4 美元。我无法弄清楚发生了什么。到目前为止，这是我尝试过的：

                <script  type="text/javascript"> 
                google.charts.load('current', {packages: ['corechart'],
                callback: drawChart});

                function drawChart() {
                var tableRows = [];
                var results = document.getElementById('chart');
                Array.prototype.forEach.call(results.rows, function(row) {
                var tableColumns = [];
                Array.prototype.forEach.call(row.cells, function(cell) {
                var cellText = cell.textContent || cell.innerText;
                switch (cell.cellIndex) {
                case 0:
                tableColumns.push(cellText.trim());
                break;

                default:
                switch (row.rowIndex) {
                case 0:
                tableColumns.push(cellText.trim());
                break;

                default:
                tableColumns.push(parseFloat(cellText));
                    }
                  }
                });
                tableRows.push(tableColumns);
                });

                var data = google.visualization.arrayToDataTable(tableRows);
                var formatter = new google.visualization.NumberFormat(
                     {negativeColor: 'red', negativeParens: true, pattern: '$###,###'});
                    formatter.format(data, 1);      
                var options = {
                      slices: { 0: {offset: 0.2},
                                1: {offset: 0.2},
                                2: {offset: 0.0},
                                3: {offset: 0.1},
                                4: {offset: 0.0},
                      },     

                title: 'Nice chart', 
                titleTextStyle: {color: 'black', fontSize: 28},
                 bar: {groupWidth: '70%'},
                    chartArea: { backgroundColor: { fill: '#F0F8FC', opacity: 100 }},
                    fontSize:12,
                    legend:  { position: 'right', textStyle: { color: 'black', fontSize: 12}},
                     tooltip: {isHtml: true},
                      is3D: true,

                    };

                var chart = new google.visualization.PieChart(document.getElementById('chart_dev'));


                chart.draw(data, options);
                }
            </script> 

Answer 1

您可以使用与饼图相同的数据表来绘制表格图。

在这里，您为饼图创建数据...

var data = google.visualization.arrayToDataTable(tableRows);

然后画饼图……

var chart = new google.visualization.PieChart(document.getElementById('chart_dev'));
chart.draw(data, options);

你也可以画个表格图表...

var table = new google.visualization.Table(document.getElementById('table_dev'));
table.draw(data, options);

只需确保在加载语句中包含'table' 包...

google.charts.load('current', {packages: ['corechart', 'table'], callback: drawChart});