Google Bar-Chart( Having Filter) With Different Colors in Bars for each column

别来无恙 提交于 2020-01-24 01:46:07

问题


Below is my javascript for google-chart

<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'],
                 ['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]
               ]);

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

        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]}


                            });

                            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>

This is my Html page....

 <html>
    <head>
        <title>Untitled Document</title>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load('visualization', '1', {packages: ['corechart']});
        </script>
    </head>
    <body>               
        <table width="100%" border="1" cellspacing="0" cellpadding="5" bordercolor="#333333">
            <tr>
                <td bgcolor="#333333" class="heading-text">TEST</td>
            </tr>
            <tr>
                <td bgcolor="#FFFFFF" class="text" align="center" id="visualization2"><br/><br/>
                    <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>
        </td>
    </tr>
</table>
</body>
</html>*

I want only one thing To do in this graph: I want 'Biological' column in RED and 'Mechanical' in Blue color.

Currently all columns are in Blue.

I found many sites for different color column.....but they don't work for me.

Please help me.

Thanks....


回答1:


Here is a solution.You need to add

series: [{color: 'blue', visibleInLegend: true}, 
           {color: 'red', visibleInLegend:false}]

in your options.

Also this is not the exact solution. It is a workaround you can add a duplicate column and hide that column for all other data except the one which you need different color.

Here is the working sample. For more google chart related queries take a look at this. jqfaq.com



来源:https://stackoverflow.com/questions/15544505/google-bar-chart-having-filter-with-different-colors-in-bars-for-each-column

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!