2014-03-02 44 views
1

我製作了幾個圖表(餅圖和欄),由於空間限制,他們需要重新調整大小,導致添加了「1/2▼「爲圖例部分。谷歌圖表 - 更改'更多'鏈接的顏色

我在這裏添加我的代碼:http://codepen.io/qtx/pen/EtHvi 而如果我的問題沒有正確顯示這裏是從我的網站,http://i.imgur.com/YJbm6jK.png周圍什麼我想換一個圓形的屏幕截圖。 (它也顯示在條形圖,如果我超越8列,如上例)

所以我的問題,有沒有什麼辦法可以改變文本/鏈接的顏色?我似乎無法在網上或在api文檔中找到任何內容。

任何幫助將不勝感激。

<script type="text/javascript"> 

     // Load the Visualization API and the piechart package. 
     google.load('visualization', '1.0', {'packages':['corechart']}); 

     // Set a callback to run when the Google Visualization API is loaded. 
     google.setOnLoadCallback(drawChart); 

     // Callback that creates and populates a data table, 
     // instantiates the pie chart, passes in the data and 
     // draws it. 
     function drawChart() { 

     // Create the data table. 
     var data = new google.visualization.arrayToDataTable([ 
     ['Task', 'Hours per Day'], 
     ['Set 1', 215], 
     ['Set 2', 83], 
     ['Set 3', 132], 
     ['Set 4', 72], 
     ['Set 5', 260], 
     ['Set 6', 34], 
     ['Set 7', 9], 
     ['Set 8', 24] 
     ]); 
     // Create the data table. 
     var data2 = new google.visualization.arrayToDataTable([ 
     ['Genre', 'Set 1', 'Set 2', 'Set 3', 'Set 4', 'Set 5', 'Set 6', 'Set 7','Set 8',{ role: 'annotation' } ], 
     ['18/7', 0, 0, 0, 0, 0, 0, 0, 2, ''], 
     ['23/7', 0, 0, 0, 0, 0, 0, 0, 1, ''], 
     ['24/7', 0, 0, 0, 0, 0, 0, 0, 4, ''], 
     ['26/7', 0, 0, 0, 0, 0, 0, 0, 4, ''], 
     ['29/7', 0, 0, 0, 0, 260, 0, 0, 0, ''], 
     ['31/7', 0, 0, 0, 0, 0, 0, 0, 1, ''], 
     ['2/8', 0, 0, 0, 0, 0, 0, 9, 0, ''], 
     ['3/8', 0, 0, 132, 0, 0, 0, 0, 0, ''], 
     ['4/8', 0, 0, 0, 0, 0, 0, 0, 11, ''], 
     ['8/8', 0, 0, 0, 0, 0, 0, 0, 0, ''], 
     ['13/8', 0, 83, 0, 0, 0, 0, 0, 0, ''], 
     ['14/8', 215, 0, 0, 0, 0, 0, 0, 0, ''], 
     ['15/8', 0, 0, 0, 72, 0, 0, 0, 0, ''], 
     ['16/8', 0, 0, 0, 0, 0, 34, 0, 0, ''], 
     ]); 

     // Set chart options 
     var options = { 
     title: '% of photos', fontSize: '12', backgroundColor: "transparent", 
     colors: ['#F56363', '#eda15f', '#40C1A0', '#FFD586', '#81CFE0', '#fcfcfc', '#A06C90', '#FFCAD1'], 
     }; 
     // Set chart options 
     var options2 = { 
     title: '# of photos', backgroundColor: "transparent", 
     colors: ['#F56363', '#eda15f', '#40C1A0', '#FFD586', '#81CFE0', '#fcfcfc', '#A06C90', '#FFCAD1'], 
     legend: { position: 'bottom', maxLines: 3 }, 
     bar: { groupWidth: '99%' }, 
     isStacked: true, 
     }; 

     // Instantiate and draw our chart, passing in some options. 
     var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
     var chart2 = new google.visualization.ColumnChart(document.getElementById('chart_div2')); 
     chart2.draw(data2, options2); 

     } 
    </script> 

謝謝你的時間。

回答

0

雖然可能有辦法做到這一點編程,可以針對與CSS元素:

<style> 
    path[d="M811,150L823,150L817,162Z"] {fill: purple;} 

或者乾脆

path[d^="M811"] {fill: purple;} 
</style> 
+0

你能向我解釋,我要補充的?我把它添加到我的CSS,但它似乎並沒有工作。 – qtx

+0

我想我想通了,M811應該是M273的箭頭向下,M246的箭頭向上。有人能向我解釋M273,M811等代表什麼?爲什麼伊舍伍德看到的數字與我不同? – qtx

+0

很高興你找到它。這種方法有點脆弱,因爲它取決於該元素始終具有該屬性。 – isherwood