2013-03-18 132 views
0

我有一個頁面 - http://projectdemo.in/Dario/Dario/Panel_report_TEST_v015.html谷歌圖:所需酒吧與「不同的顏色」

請參考此圖「外科心臟瓣膜植入物:機械VS生物組合,2012年第四季度」

現在,在這個圖,我想要紅色的「機械」和藍色的「生物」。

我該怎麼辦呢?

這是我的代碼------

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

請幫助我。迫在眉睫。

回答

0

你可以試試這個,

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

不,這不是工作 – Napster 2013-03-18 13:41:39

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