谷歌图表背景颜色
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了谷歌图表背景颜色相关的知识，希望对你有一定的参考价值。
我正在使用javascript api设计谷歌图表。我想更改绘制数据的区域的背景。出于某种原因，当我设置背景选项时：
chart.draw(data, { backgroundColor: { fill: "#F4F4F4" } })
它会更改整个图表的背景，而不会更改绘制数据的区域。关于如何仅改变绘图区域背景的任何想法？谢谢
传递这样的选项
var options = {
title: 'title',
width: 310,
height: 260,
backgroundColor: '#E4E4E4',
is3D: true
};
将此添加到您的选项：
'chartArea': {
'backgroundColor': {
'fill': '#F4F4F4',
'opacity': 100
},
}
使用这些选项更容易。
drawChart() {
// Standard google charts functionality is available as GoogleCharts.api after load
const data = GoogleCharts.api.visualization.arrayToDataTable([
['Chart thing', 'Chart amount'],
['Na Meta', 50],
['Abaixo da Meta', 22],
['Acima da Meta', 10],
['Refugos', 15]
]);
let options = {
backgroundColor: {
gradient: {
// Start color for gradient.
color1: '#fbf6a7',
// Finish color for gradient.
color2: '#33b679',
// Where on the boundary to start and
// end the color1/color2 gradient,
// relative to the upper left corner
// of the boundary.
x1: '0%', y1: '0%',
x2: '100%', y2: '100%',
// If true, the boundary for x1,
// y1, x2, and y2 is the box. If
// false, it's the entire chart.
useObjectBoundingBoxUnits: true
},
},
};
const chart = new GoogleCharts.api.visualization.ColumnChart(this.$.chart1);
chart.draw(data, options);
}
我正在使用聚合物，这就是我使用它的原因。$。cart1，但你可以使用selectedbyid，没问题。
你尝试过使用backgroundcolor.stroke和backgroundcolor.strokewidth吗？
正确的答案是，它取决于它是经典的Google Charts还是Material Google Charts。如果您使用经典版Google图表，则上述建议的多个工作正常。但是，如果您使用较新的材质类型Google图表，则必须以不同方式指定选项，或转换它们（请参阅下面的google.charts.Bar.convertOptions(options)）。最重要的是，如果为整个图表指定不透明度，则在材质图表的情况下，不透明度（仅）不适用于图表区域。因此，您需要使用图表区域的不透明度以及相同颜色组合明确指定颜色。
一般来说：Google图表的素材版本缺少Classic所具有的一些功能（倾斜的轴标签，趋势线，自定义列着色，Combo图表等等），反之亦然：数字格式和双重（三重， quadruple，...）轴仅支持Material版本。
如果材料图表支持某个功能，有时需要不同的选项格式。
<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/
如果你想这样做，那将有所帮助。我在Google库的组合图表中使用stepped area图表...其中每个步进区域的值是刻度值。
这是jsfiddle code的链接
你可以用CSS做到这一点：
#salesChart svg > rect { /*#salesChart is ID of your google chart*/
fill: #F4F4F4;
}
只需添加背景选项
backgroundColor: {
fill:'red'
},
这里是小提琴链接https://jsfiddle.net/amitjain/q3tazo7t/
以上是关于谷歌图表背景颜色的主要内容，如果未能解决你的问题，请参考以下文章