谷歌圖表背景顏色

我正在使用javascript api設計谷歌圖表。我想更改數據繪製區域的背景。出於某種原因，當我設置背景選項，如下所示：谷歌圖表背景顏色

chart.draw(data, { backgroundColor: { fill: "#F4F4F4" } })

它改變了整個圖表的背景，而其中的數據繪製的區域。關於如何改變繪製區域背景的任何想法？謝謝

來源

2012-01-10 firebait

您是否嘗試過使用backgroundcolor.stroke和backgroundcolor.strokewidth？

請參閱Google Charts documentation。

來源

2012-05-10 15:29:03 andypotter

通過這樣

var options = { 
    title: 'title', 
    width: 310, 
    height: 260, 
    backgroundColor: '#E4E4E4', 
    is3D: true 
};

來源

2012-08-20 07:12:13

的選項添加到您的選擇：

'chartArea': { 
    'backgroundColor': { 
     'fill': '#F4F4F4', 
     'opacity': 100 
    }, 
}

來源

2013-01-31 16:27:38

領域的透明度不爲的backgroundColor – thermz 2014-02-24 16:12:10

它適用於fillOpacity工作：0..1 – 2016-10-19 05:05:21

-3

只需添加背景選項

backgroundColor: { 
     fill:'red'  
     },

這裏是小提琴鏈接https://jsfiddle.net/amitjain/q3tazo7t/

來源

2016-08-11 13:34:58

這已經包含在其他的答案。 – 2016-08-11 13:46:30

正確的答案是它取決於它是傳統的Google Charts還是Material Google Charts。如果您使用谷歌圖表的經典版本，上述建議的多個工作。但是，如果您使用較新的材料類型Google圖表，則必須以不同的方式指定選項，或將其轉換（請參閱下面的google.charts.Bar.convertOptions(options)）。除此之外，如果您爲整個圖表指定不透明度，則不透明度（僅）將不適用於圖表區域。因此，您需要明確指定圖表區域的不透明度以及相同顏色組合的顏色。

一般來說：谷歌圖表的材質版缺少一些經典功能（傾斜軸標籤，趨勢線，自定義列着色，組合圖表等等），以及反過來：數字格式化和雙（三重，四重...）軸僅在材質版本中受支持。

如果兩個材質圖表均支持某項功能，則有時需要不同的選項格式。

<body> 
    <div id="classic_div"></div> 
    <div id="material_div"></div> 
</body>

JS：

google.charts.load('current', { 'packages': ['corechart', 'bar'] }); 
    google.charts.setOnLoadCallback(drawChart); 

    function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Year', 'Sales', 'Expenses'], 
     ['2004', 1000, 400], 
     ['2005', 1170, 460], 
     ['2006', 660, 1120], 
     ['2007', 1030, 540], 
     ['2009', 1120, 580], 
     ['2010', 1200, 500], 
     ['2011', 1250, 490], 
    ]); 
    var options = { 
     width: 1000, 
     height: 600, 
     chart: { 
     title: 'Company Performance', 
     subtitle: 'Sales, Expenses, and Profit: 2014-2017' 
     }, 
     // Accepts also 'rgb(255, 0, 0)' format but not rgba(255, 0, 0, 0.2), 
     // for that use fillOpacity versions 
     // Colors only the chart area, simple version 
     // chartArea: { 
     // backgroundColor: '#FF0000' 
     // }, 
     // Colors only the chart area, with opacity 
     chartArea: { 
     backgroundColor: { 
      fill: '#FF0000', 
      fillOpacity: 0.1 
     }, 
     }, 
     // Colors the entire chart area, simple version 
     // backgroundColor: '#FF0000', 
     // Colors the entire chart area, with opacity 
     backgroundColor: { 
     fill: '#FF0000', 
     fillOpacity: 0.8 
     }, 
    } 

    var classicChart = new google.visualization.BarChart(document.getElementById('classic_div')); 
    classicChart.draw(data, options); 

    var materialChart = new google.charts.Bar(document.getElementById('material_div')); 
    materialChart.draw(data, google.charts.Bar.convertOptions(options)); 
    }

小提琴演示：https://jsfiddle.net/csabatoth/v3h9ycd4/2/

來源

2017-10-06 00:24:15

就是我在找的東西。僅在圖表區域中使用背景顏色。謝謝：） – 2017-11-29 16:51:05

谷歌圖表背景顏色

回答

相關問題