Лучший способ отформатировать число в SQl для отображения через панель подсказок Google Charts? - PullRequest
1 голос
/ 07 ноября 2019

У меня есть запрос SQL, который выводит данные в массив, и я использую его в диаграммах Google. Когда числовое поле отформатировано как необработанное число (например, 374000000), диаграмма и форматирование в моем коде работают должным образом. Во всплывающих подсказках отображается правильная валюта, а запятые отображаются правильно (например, 374 000 000 долларов США). Однако, поскольку я включил таблицу под диаграмму, использовать ее сложнее. Таким образом, когда я правильно форматирую числа в SQL, и они отображаются в таблице (например, 374 000 000), тогда подсказка диаграммы Google показывает 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> 

1 Ответ

0 голосов
/ 09 ноября 2019

Вы можете нарисовать диаграмму таблицы, используя ту же таблицу данных, что и круговая диаграмма.

здесь, где вы создаете данные для круговой диаграммы ...

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});
...