谷歌图表:需要“不同颜色”的栏

时间:2013-03-18 12:25:09

标签: jquery google-visualization

我有一页 - http://projectdemo.in/Dario/Dario/Panel_report_TEST_v015.html

请参阅此图“手术心脏瓣膜植入物:机械与生物混合物,2012年第4季度”

现在在这张图中,我希望“机械”为红色,“生物”为蓝色。

我该怎么做?

这是我的代码------

<tr>

            <td bgcolor="#FFFFFF" class="text" align="center" id="visualization2"><br/><br/>
                <script type="text/javascript">
                    google.load('visualization', '1.1', {packages: ['controls']});
                </script>
                <script type="text/javascript">
                    function drawVisualization() {
                        // Prepare the data
                        var data = google.visualization.arrayToDataTable([
                            ['Country', 'Position', 'Prosthethis type', 'Units'],
                            ['Austria', 'Aortic',  'Mechanical',  84],
                            ['Austria', 'Aortic',  'Biological',  393],
                            ['Austria', 'Mitral',  'Mechanical',  24],
                            ['Austria', 'Mitral',  'Biological',  125],
                            ['Benelux', 'Aortic',  'Mechanical',  365],
                            ['Benelux', 'Aortic',  'Biological',  1147],
                            ['Benelux', 'Mitral',  'Mechanical',  223],
                            ['Benelux', 'Mitral',  'Biological',  302],
                            ['Europe', 'Aortic',  'Mechanical',  5007],
                            ['Europe', 'Aortic',  'Biological',  15434],
                            ['Europe', 'Mitral',  'Mechanical',  1974],
                            ['Europe', 'Mitral',  'Biological',  3550],
                            ['France', 'Aortic',  'Mechanical',  803],
                            ['France', 'Aortic',  'Biological',  2277],
                            ['France', 'Mitral',  'Mechanical',  229],
                            ['France', 'Mitral',  'Biological',  436],
                            ['Germany', 'Aortic',  'Mechanical',  1038],
                            ['Germany', 'Aortic',  'Biological',  4397],
                            ['Germany', 'Mitral',  'Mechanical',  228],
                            ['Germany', 'Mitral',  'Biological',  929],
                            ['Italy', 'Aortic',  'Mechanical',  678],
                            ['Italy', 'Aortic',  'Biological',  2383],
                            ['Italy', 'Mitral',  'Mechanical',  284],
                            ['Italy', 'Mitral',  'Biological',  520],
                            ['Nordics', 'Aortic',  'Mechanical',  351],
                            ['Nordics', 'Aortic',  'Biological',  971],
                            ['Nordics', 'Mitral',  'Mechanical',  145],
                            ['Nordics', 'Mitral',  'Biological',  226],
                            ['Portugal', 'Aortic',  'Mechanical',  159],
                            ['Portugal', 'Aortic',  'Biological',  534],
                            ['Portugal', 'Mitral',  'Mechanical',  85],
                            ['Portugal', 'Mitral',  'Biological',  111],
                            ['Spain', 'Aortic',     'Mechanical',  646],
                            ['Spain', 'Aortic',     'Biological',  1469],
                            ['Spain', 'Mitral',     'Mechanical',  417],
                            ['Spain', 'Mitral',     'Biological',  359],
                            ['Switzerland',  'Aortic', 'Mechanical',  166],
                            ['Switzerland',  'Aortic', 'Biological',  328],
                            ['Switzerland',  'Mitral', 'Mechanical',  85],
                            ['Switzerland', 'Mitral', 'Biological',  122],
                            ['UK & Ireland', 'Aortic', 'Mechanical', 588],
                            ['UK & Ireland', 'Aortic', 'Biological', 1283],
                            ['UK & Ireland', 'Mitral', 'Mechanical', 191],
                            ['UK & Ireland', 'Mitral', 'Biological', 314]
                        ]);

                        // Define category pickers for 'Country', 'Region/State' and 'City'
                        var countryPicker = new google.visualization.ControlWrapper({
                            'controlType': 'CategoryFilter',
                            'containerId': 'control4',
                            'options': {
                                'filterColumnLabel': 'Country',
                                'ui': {
                                    'labelStacking': 'vertical',
                                    'allowTyping': false,
                                    'allowMultiple': false
                                }
                            },
                            'state': {'selectedValues': ['Europe']}

                        });

                        var regionPicker = new google.visualization.ControlWrapper({
                            'controlType': 'CategoryFilter',
                            'containerId': 'control5',
                            'options': {
                                'filterColumnLabel': 'Position',
                                'ui': {
                                    'labelStacking': 'vertical',
                                    'allowTyping': false,
                                    'allowMultiple': false
                                }
                            }
                        });

                        var cityPicker = new google.visualization.ControlWrapper({
                            'controlType': 'CategoryFilter',
                            'containerId': 'control6',
                            'options': {
                                'filterColumnLabel': 'Prosthethis type',
                                'ui': {
                                    'labelStacking': 'vertical',
                                    'allowTyping': false,
                                    'allowMultiple': false
                                }
                            }
                        });

                        // Define a bar chart to show 'Population' data
                        var barChart = new google.visualization.ChartWrapper({
                            'chartType': 'BarChart',
                            'containerId': 'chart3',
                            'options': {
                                'width': 400,
                                'height': 300,
                                'chartArea': {top: 0, right: 0, bottom: 0}
                            },
                            // Configure the barchart to use columns 2 (City) and 3 (Population)
                            'view': {'columns': [2, 3],'colors': ['red','green']}


                        });

                        // Create the dashboard.
                        new google.visualization.Dashboard(document.getElementById('visualization2')).
                            // Configure the controls so that:
                        // - the 'Country' selection drives the 'Region' one,
                        // - the 'Region' selection drives the 'City' one,
                        // - and finally the 'City' output drives the chart
                        bind(countryPicker, regionPicker).
                            bind(regionPicker, cityPicker).
                            bind(cityPicker, barChart).
                            // Draw the dashboard
                        draw(data);
                    }


                    google.setOnLoadCallback(drawVisualization);

                </script>
                <table>
                    <tr style='vertical-align: top'>
                        <td style='width: 300px; font-size: 0.9em;'>
                            <div id="control4"></div>
                            <div id="control5"></div>
                            <div id="control6"></div>
                        </td>
                        <td style='width: 600px'>
                            <div style="float: left;" id="chart3"></div>
                            <div style="float: left;" id="chart4"></div>

                        </td>
                    </tr>
                </table>
            </td>
        </tr>

2 个答案:

答案 0 :(得分:0)

你能试试吗,

var options = {
    region: 'IT',
    displayMode: 'markers',
    **colorAxis: {colors: ['green', 'blue']}**
  };

答案 1 :(得分:0)

您只需将数据转换为以下格式。

var data = google.visualization.arrayToDataTable([
     ['Country', 'Position', 'Prosthethis type', 'Units', 'Units'],
                    ['Austria', 'Aortic', 'Mechanical', 84, 0],
                    ['Austria', 'Aortic', 'Biological', 0, 393],
                    ['Austria', 'Mitral', 'Mechanical', 24, 0],
                    ['Austria', 'Mitral', 'Biological', 0, 125],
                    ['Benelux', 'Aortic', 'Mechanical', 365, 0],
                    ['Benelux', 'Aortic', 'Biological', 0, 1147],
                    ['Benelux', 'Mitral', 'Mechanical', 223, 0],
                    ['Benelux', 'Mitral', 'Biological', 0, 302],
                    ['Europe', 'Aortic', 'Mechanical', 5007, 0],
                    ['Europe', 'Aortic', 'Biological', 0, 15434],
                    ['Europe', 'Mitral', 'Mechanical', 1974, 0],
                    ['Europe', 'Mitral', 'Biological', 0, 3550],
                    ['France', 'Aortic', 'Mechanical', 803, 0],
                    ['France', 'Aortic', 'Biological', 0, 2277],
                    ['France', 'Mitral', 'Mechanical', 229, 0],
                    ['France', 'Mitral', 'Biological', 0, 436],
                    ['Germany', 'Aortic', 'Mechanical', 1038, 0],
                    ['Germany', 'Aortic', 'Biological', 0, 4397],
                    ['Germany', 'Mitral', 'Mechanical', 228, 0],
                    ['Germany', 'Mitral', 'Biological', 0, 929],
                    ['Italy', 'Aortic', 'Mechanical', 678, 0],
                    ['Italy', 'Aortic', 'Biological', 0, 2383],
                    ['Italy', 'Mitral', 'Mechanical', 284, 0],
                    ['Italy', 'Mitral', 'Biological', 0, 520],
                    ['Nordics', 'Aortic', 'Mechanical', 351, 0],
                    ['Nordics', 'Aortic', 'Biological', 0, 971],
                    ['Nordics', 'Mitral', 'Mechanical', 145, 0],
                    ['Nordics', 'Mitral', 'Biological', 0, 226],
                    ['Portugal', 'Aortic', 'Mechanical', 159, 0],
                    ['Portugal', 'Aortic', 'Biological', 0, 534],
                    ['Portugal', 'Mitral', 'Mechanical', 85, 0],
                    ['Portugal', 'Mitral', 'Biological', 0, 111],
                    ['Spain', 'Aortic', 'Mechanical', 646, 0],
                    ['Spain', 'Aortic', 'Biological', 0, 1469],
                    ['Spain', 'Mitral', 'Mechanical', 417, 0],
                    ['Spain', 'Mitral', 'Biological', 0, 359],
                    ['Switzerland', 'Aortic', 'Mechanical', 166, 0],
                    ['Switzerland', 'Aortic', 'Biological', 0, 328],
                    ['Switzerland', 'Mitral', 'Mechanical', 85, 0],
                    ['Switzerland', 'Mitral', 'Biological', 0, 122],
                    ['UK0&0Ireland', 'Aortic', 'Mechanical', 588, 0],
                    ['UK0&0Ireland', 'Aortic', 'Biological', 0, 1283],
                    ['UK0&0Ireland', 'Mitral', 'Mechanical', 191, 0],
                    ['UK0&0Ireland', 'Mitral', 'Biological', 0, 314]

                ]);

并将图表配置为

// Configure the barchart to use columns 2 (City) and 3 (Population)
'view': {'columns': [2, 3, 4]}