谷歌图表背景颜色

我正在使用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

谷歌图表背景颜色

回答

相关问题