невозможно создать полную круговую диаграмму с помощью Google Charts

0

я пытаюсь реализовать Google Graph и Dashboard,

Вот фрагмент моего кода,

     <script type="text/javascript">

            function drawVisualization(dataArray) {
                //                function drawVisualization() {
                // Prepare the data
                var data = google.visualization.arrayToDataTable(dataArray);
                // Define a category picker control for the Gender column
                var categoryPicker = new google.visualization.ControlWrapper({
                    'controlType': 'CategoryFilter',
                    'containerId': 'control2',
                    'options': {
                        'filterColumnLabel': 'Provider State',
                        'ui': {
                            'labelStacking': 'vertical',
                            'allowTyping': false,
                            'allowMultiple': false
                        }
                    }
                });

                // Define a Pie chart
                var pie = new google.visualization.ChartWrapper({
                    'chartType': 'PieChart',
                    'containerId': 'chart1',
                    'options': {
                        'width': 300,
                        'height': 300,
                        'legend': 'none',
                        'title': 'Demo Data Displayed',
                        'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
                        'pieSliceText': 'label'
                    },
                    // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
                    // from the 'data' DataTable.
                    'view': {'columns': [1, 5]}
                });

                // Define a table
                var table = new google.visualization.ChartWrapper({
                    'chartType': 'Table',
                    'containerId': 'chart2',
                    'options': {
                        'width': '300px'
                    }
                });

                // Create a dashboard
                new google.visualization.Dashboard(document.getElementById('dashboard')).
                    // Establish bindings, declaring the both the slider and the category
                // picker will drive both charts.
                bind([categoryPicker], [pie, table]).
                    //                    bind([pie, table]).
                // Draw the entire dashboard.
                draw(data);
            }

        </script>
// This is the dataArray [["DRG Definition","Provider State","Total Discharges","Average Covered Charges","Average Total Payments","id"],["039 - EXTRACRANIAL PROCEDURES W\/O CC\/MCC","AL","879","29855.3481218009","5857.17519906485","2"],["039 - EXTRACRANIAL PROCEDURES W\/O CC\/MCC","AZ","606","33581.3151824257","7034.48184806271","4"],["039 - EXTRACRANIAL PROCEDURES W\/O CC\/MCC","CO","255","33554.1607857647","6911.51372542745","6"],["039 - EXTRACRANIAL PROCEDURES W\/O CC\/MCC","DC","47","44919.3829785106","9241.59574459574","8"],["039 - EXTRACRANIAL PROCEDURES W\/O CC\/MCC","FL","2847","38464.4531085423","6145.54970143098","10"],["039 - EXTRACRANIAL PROCEDURES W\/O CC\/MCC","HI","24","27809.95833","10982.04167","12"],["039 - EXTRACRANIAL PROCEDURES W\/O CC\/MCC","ID","113","18150.97345","6457.23893819469","14"],["039 - EXTRACRANIAL PROCEDURES W\/O CC\/MCC","IN","1078","26888.4359918275","6597.5454545872","16"],["039 - EXTRACRANIAL PROCEDURES W\/O CC\/MCC","KY","728","22308.0645596154","6347.6085165467","18"],....

Проблема здесь в том, что мой график (круговая диаграмма) действительно генерирует, но он загружается только частично, можно сказать, что если я выберем 1 значение из категории, выпадающий список, отображается только его кружок, я не вижу других значений из диаграммы, я надеюсь, что некоторые могут помоги мне здесь.

Теги:
charts
google-visualization

1 ответ

1
Лучший ответ

Во-первых, как я уже упоминал в своем ответе на ваш другой вопрос, вы должны вводить свои номера в виде чисел, а не строк, если вы хотите, чтобы PieChart работал. В качестве примера вам необходимо изменить это:

["039 - EXTRACRANIAL PROCEDURES W\/O CC\/MCC","AL","879","29855.3481218009","5857.17519906485","2"]

к этому:

["039 - EXTRACRANIAL PROCEDURES W\/O CC\/MCC","AL",879,29855.3481218009,5857.17519906485,2]

С этим исправлением управление работает точно так же, как вы его разработали: оно фильтруется в столбце "Состояние поставщика". С предоставленными образцами данных PieChart показывает только один фрагмент, но это потому, что данные содержат только одну строку для каждого состояния. См. Рабочий пример на основе вашего кода здесь: http://jsfiddle.net/asgallant/tqB92/

  • 0
    Спасибо, что вы прояснили мое зрение здесь, чтобы в последнем вопросе я пытался спрятаться за кустом, но здесь я думаю, что я должен сделать это, как вы предложили, я пометлю это как правильное, как только я его реализую
  • 0
    просто для справки мой серверный скрипт был PHP, и я просто добавил его в качестве параметра echo json_encode ($ dataArray, JSON_NUMERIC_CHECK); это решит проблему.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню