如何为google图表添加颜色
为Google图表添加颜色可以通过以下步骤实现：
- 在HTML文件中引入Google图表库的JavaScript文件。可以使用以下代码将Google图表库添加到HTML文件中：<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
- 创建一个包含图表数据和选项的JavaScript对象。例如，创建一个包含柱状图数据和选项的对象：var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2016', 1000, 400], ['2017', 1170, 460], ['2018', 660, 1120], ['2019', 1030, 540] ]); var options = { colors: ['#3366cc', '#dc3912'], // 设置柱状图的颜色 chart: { title: 'Sales and Expenses', subtitle: '2016-2019', } };
- 使用Google图表库的
draw()函数将图表绘制到指定的HTML元素中。例如，将柱状图绘制到具有id为chart_div的<div>元素中：var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); chart.draw(data, options);
在上述代码中，colors选项用于设置柱状图的颜色。可以通过提供一个颜色数组来指定每个柱状图的颜色。在示例中，使用了两种颜色：#3366cc和#dc3912。
注意：以上代码假设已经正确加载了Google图表库，并且在HTML文件中存在一个具有id为chart_div的<div>元素用于显示图表。
推荐的腾讯云相关产品：腾讯云图表可视化（https://cloud.tencent.com/product/tcv），该产品提供了丰富的图表类型和自定义选项，可以满足各种数据可视化需求。
相关·内容
1回答
我在Action Script 3.0中构建图表，需要设置绘制图表的区域的背景颜色。我找到了如何为所有图表设置背景颜色的解决方案，但这并不完全是我所需要的:我需要对绘制图表的部分进行着色
浏览 0提问于2009-12-17得票数 1
2回答
我当前的图例代码是：
legend: {
position: 'top',
maxLines: 3,
textStyle: {
color: '#969696',
},
},
我希望它看起来像这样的一个例子：
我似乎找不到如何为图例中的每一个元素设置背景颜色。
*编辑
目前的情况如下：
使用：
var options = {
colors: ['#ee720
浏览 0提问于2018-12-12得票数 1
回答已采纳
我用google图表创建了一个列图表，每个列都有不同的颜色，使用下面的公告：
但现在，我正试图弄清楚如何为每一列定制工具提示，以便除百分比外还包括用户数，所以"raw_datai“
我希望它看起来像"70% (80个用户)“
我知道有"data.addColumn({type:'number'，角色：‘tooltip’})；但是我很难理解如何为这个用例实现它。
function drawAccountsChart() {
var data = new google.visualization.DataTable();
var ra
浏览 2提问于2013-11-05得票数 1
回答已采纳
6回答
我正在用KendoUI替换我的.net图表。我展示了一个分数分布图。我希望所有的条都是相同的颜色，除了中位数和图例的条。如何为单个条形图添加独特的颜色？我该如何给这个新颜色上色？
下面是我的旧的dotnet图表条形图，下面是我正在尝试用来替换它的新的KendoUI图表。我只需要把颜色弄好，我们就可以开始做生意了。任何帮助都是非常感谢的。
浏览 9提问于2012-04-13得票数 12
回答已采纳
5回答
有没有一种方法可以在Google图表API中对工具提示进行样式化？我只使用更改了文本的颜色。那么是否有任何解决方案将白色背景更改为某些其他颜色的(如图所示)：
测试操场
浏览 4提问于2012-05-29得票数 7
回答已采纳
我正在为谷歌图表创建一个自定义图例，它将显示每个系列的统计数据。我使用谷歌表格来做这件事。因为它也是图例，所以我希望第一列具有与图表中的颜色相对应的颜色标记。但是我在Google Charts API中找不到任何东西，它提供了一种方法来询问图表每个系列使用的是什么颜色。
浏览 2提问于2014-02-25得票数 7
我正在使用谷歌图表。我想要更改图表中的条形图颜色。所以我用系列风格改变了条形图的颜色。但同时，我想要更改图例指示器颜色，也根据条形图颜色。但我无法更改图例指示器颜色。请帮帮我。
图表代码如下：
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart3);
function drawChart3() {
var data = google.visualization.a
浏览 5提问于2014-03-14得票数 12
回答已采纳
我正在使用charts_flutter插件，而且我在改变图表中的条形图的颜色方面有问题。因为我的图表的数据是灵活的，你不能硬编码它的颜色，所以在图表中自动改变图表的颜色是有问题的吗？
以下是我如何为我的图表放置图例和数据
代码：
_list.add(new RedeemedToday.fromJson(valueMap));
newLegends.add(charts.Series<RedeemedToday, String>(
id: '${redeemedToday[index].couponName}',
浏览 1提问于2020-11-04得票数 0
回答已采纳
1回答
我正在研究如何为以下数据集创建Google散射图可视化：
Person Week Production
------ ---- ----------
Bob 1 3
Bob 2 3
Bob 3 6
Bob 4 2
Bob 5 0
Bob 6 4
Sue 1 7
Sue 3 6
Sue 4 8
因此，我想看到的是沿着hAxis和生产沿着vAxis的周。每个人，活数据可能是2人以上，会有自己的情节点颜色，
浏览 0提问于2014-03-26得票数 0
回答已采纳
我正在尝试使用JFreeChart绘制动态饼图。我不知道提前会有多少部分。我每秒都会收到更新图表的数据。
如何为图表的每个部分设置颜色？我不希望有默认的颜色。
我已尝试设置DrawingSupplier。不起作用。有人能帮上忙吗？
浏览 25提问于2015-06-27得票数 0
我在Google文档中有一个图表，标题是我试图使用Apps脚本作为另一个命令的一部分来更新的。我正在使用修改().setOption().build()方法。
每当我运行这一行时，它都会正确地更新标题。但是，它也将行颜色重置为默认的Google调色板。重置颜色会破坏图表的很大一部分用途，我宁愿没有标题，只有正确的颜色。
有没有一种方法可以更新表格中图表的标题而不重新设置线条颜色？或者没有其他的方法，所以我只需要扩展脚本，在更新标题之后也更新行颜色？
这是代码行--我知道在一行代码中这样做是不太好的形式，但是代码可以工作，而我无法想象的颜色重置与它相关：
SpreadsheetApp.getAc
浏览 3提问于2021-09-02得票数 0
回答已采纳
使用{role：'style'}，我可以将不同的颜色应用于单个系列条形图。但是，如果我使用新的谷歌“材料”条形图，我不能。
“定期”谷歌图表(作品)：
google.load("visualization", '1.1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['
浏览 2提问于2015-06-22得票数 4
回答已采纳
我有一个谷歌图表，我试图改变基于类别控件的颜色。
我的图表是一个直方图，它应该根据在programmaticDropdown中的选择来改变颜色。我的部分代码如下所示：
var dashboard = new google.visualization.Dashboard(
document.getElementById('programmatic_dashboard_div'));
programmaticDropdown = new google.visualization.ControlWrapper({
'controlT
浏览 3提问于2016-01-26得票数 1
2回答
我正在使用角9+ Google图表通过npm: npm安装角google-图表
我想为列图表中的所有列设置不同的颜色，但它将第一颜色设置为所有列。
有没有人遇到这样的问题，或有任何解决方案，设置不同颜色的列在谷歌栏图表？
HTML：
<google-chart #chart
[title]="title"
[type]="type"
[data]="data"
[columns]="columnNames"
[options]="options"
[width]="
浏览 5提问于2020-06-17得票数 2
回答已采纳
我想将图表区域的默认黄色更改为用户定义的颜色。我只能更改标记颜色。我使用此代码来生成图表数据。
dataTable = new google.visualization.DataTable();
dataTable.addRows(4);
dataTable.addColumn('number', 'LATITUDE', 'Latitude');
dataTable.addColumn('number', 'LONGITUDE', 'L
浏览 9提问于2015-05-27得票数 2
2回答
我试图找出一种方法，以生成谷歌列图表与每一列在不同的/随机的颜色。下面是我制作图表的细节：
Client/Javascript:
使用google.visualization.ChartWrapper绘制图表。下面是代码片段：
var wrapper = new google.visualization.ChartWrapper({
chartType : chartType,
dataSourceUrl : url,
containerId : 'chartDiv',
options : chartOptions
});
数据是从用java编
浏览 1提问于2015-10-08得票数 3
回答已采纳
此图表在Google图表中运行良好，但在Eastwood中呈现时，它不使用第二个提供的颜色，而是将第一个颜色应用于图表中的两个条形图。
http://chart.apis.google.com/chart?cht=bvg&chs=150x150&chd=t:18,81&chco=FFF000|00FFFF&chxt=x,y&chl=Bar1|Bar2&chtt=Chart
对于为什么会这样，有什么建议吗？不幸的是，伊斯特伍德看起来有点被遗弃了。
浏览 0提问于2010-05-12得票数 0
2回答
如何为不同类型的数据和高库存的右侧显示特定的颜色。
例如，如果你看一下，它在图表的右侧显示了东京、纽约等。
我想用高库存和比较图表系列来做这件事。
浏览 1提问于2014-08-14得票数 0
我正在尝试更改图表的系列颜色，该图表是用JasperReports从子报表中调用的
JRChartPlot pl;
JRFillObjectFactory fac;
JRFillChartPlot plot = new JRFillChartPlot(pl, fac);
如何为我的JRFillChartPlot构造函数实例化JRChartPLot？前面的代码给出了空指针异常
浏览 0提问于2009-05-29得票数 2
我有一个事务列表，这些事务返回status作为图表标签，count作为图表数据。我的标签通常是['cancelled', 'completed', 'rejected']，但有时数据返回['cancelled', 'completed', 'error', 'pending', 'rejected]。如何为每个标签设置不同的颜色？
到目前为止我的代码是：
statusCount: StatusCount[] = [];
loaded = false;
// Doug
浏览 0提问于2018-06-29得票数 0
回答已采纳
2回答
我们试图在google area chart中只填充一种颜色，使用不同的线条颜色。
如果我们使用
isStacked:true
然后，它将更改图表表示形式
(更改y轴最大坐标)
我们只想填充一种颜色
(图表中最大边框下方的绿色)。
浏览 2提问于2016-01-08得票数 2
1回答
是否有可能在Google图表API中将数据绑定到特定的颜色...
假设我有两个饼图，如中所示。我想将数据绑定到特定的颜色-
eg - EAT在所有图表中都应该是红色的，睡眠应该总是绿色的。
如果一个特定的项目没有出现在任何特定的图表中，那么对应于缺失值的颜色就不应该出现在该图表中……
我试过了
slices: [{color: 'black', {}, {}, {color: 'red'}]
以及
slices: {0: {color: 'black'}, 3: {color: 'red'}}
但是不能处理缺失值...
查看可以清
浏览 2提问于2013-05-10得票数 1
回答已采纳
1回答
我在运行时使用win forms创建了一个图表(C#.Net Framework3.5)。
我想让这个图表中的图例项目具有交互性。
我的要求是，当用户单击图例中显示的颜色项时--颜色托盘应该打开，当用户从托盘中选择颜色时，所选的颜色应该应用于外部系列数据项。
我怎样才能做到这一点？简而言之，如何为图例项添加单击事件处理程序？
任何帮助都是非常感谢的。注意：
浏览 5提问于2013-08-13得票数 4
回答已采纳
我是mvc的新手，我想知道如果用户do@html.TextBoxFor输入了错误的登录信息，我该如何更改背景颜色。我使用它非常简单。
@Html.TextBoxFor(m => m.Email，@Html.TextBoxFor {@class="caixa_login_email“})
如何为背景颜色添加新的值？
浏览 2提问于2011-09-20得票数 1
回答已采纳
我在我的nuxt项目中使用了vue google图表。当我更改日期选择时，数据会发生变化，并且geochart组件中的computed方法会读取正确的新数据...但是底部的图例(颜色条)不能正常工作...相反，它读取NaN NaN...As a result，图表显示正确的数据，但不是正确的颜色编码。为清晰起见，请附上截图。(鼠标悬停在国家/地区上会显示正确的数据，但由于颜色映射不起作用，两个国家显示相同的颜色阴影，尽管值明显不同) 这就是我加载图表的方式： <GChart
:settings="{ packages: ['geochart'], mapsA
浏览 21提问于2021-06-30得票数 2
回答已采纳
0回答
我正在创建一个项目，需要能够显示不同的值和每个图表的颜色多个谷歌甜甜圈图表。目前，我正在创建3个图表，使用示例google图表代码在单独的html页面上使用3个按钮导航到这些图表：
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript"
浏览 8提问于2016-07-02得票数 2
回答已采纳
2回答
乡村色彩
、、、
我使用v3编写了一个HTML文件。
我想做的就是给几个国家涂上颜色，比如，把中国和加拿大的颜色涂成红色。什么是简单的解决方案(不涉及多边形和数千个坐标)在各国的颜色？
在浏览了以前的StackOverFlow问题之后，似乎有三种常见的解决方案。然而，这3种解决方案似乎不适合我的情况。
-I并不真正理解Charts是否是一个很好的解决方案，因为我已经有了一个使用Google的文件。除非图表可以应用在我的地图上，或者与地图同步，否则这似乎不是一个有效的解决方案。
样式化(使用样式向导) -This向导(据我所知)处理一般特征的样式，如道路、水、人口等。除非有人能告诉我如何为特定的国家指定颜
浏览 2提问于2012-06-18得票数 0
回答已采纳
1回答
我有一些高图表的问题，我正在使用一个热图。
副标题包括在图表里，我该怎么解决呢？
如何为每个单元格设置最大长度？当我只有几个元素的时候，它真的很大。
我不想在背景中显示任何颜色。
我不想显示细胞的价值。
浏览 2提问于2014-07-14得票数 0
我注意到我在图表中启用了colorByPoint选项，但是如何为数据中的每个点指定颜色？
我是否必须指定数据的每一位分别与它的颜色？如果是这样的话，是怎么做的？我已经玩了很长时间了，怎么也玩不好！
浏览 1提问于2011-03-17得票数 0
2回答
我使用的是yii2 ，但无法自定义甜甜圈图表。
此外，我还从给定的文档中尝试了。
<?php echo ChartJs::widget([
'type' => 'pie',
'data' => [
'labels' => ["test","test1","test2","Test4"],
'datasets' => [
浏览 0提问于2017-12-07得票数 0
回答已采纳
我有一个带图表的Google Sheets电子表格。我想自定义图表的颜色，而不是默认调色板中可用的颜色。我相信这应该可以通过Apps Scripts来实现。但我无法将以下内容用于折线图：
function chartColors() {
var sheet = SpreadsheetApp.getActiveSheet();
var range = sheet.getRange("A1:I100")
var chart = sheet.getCharts()[0];
chart = chart.modify()
.setOption('colors&#
浏览 3提问于2017-05-01得票数 1
1回答
我想用高图表在散点图上画一个边框。
我只找到了如何更改标记，但它只适用于悬停状态：
marker: {
lineColor: "red"
}
你可以在这里看到它：
有没有办法，如何为“正常”状态中的一个点设置边框颜色，或者为某个意境点设置边框颜色？
浏览 0提问于2018-03-15得票数 0
回答已采纳
1回答
我需要为flot图创建一个动态数据系列。我的x轴是time，y轴是count。
我需要显示5个不同颜色的图表。我将如何为Flot提供数据系列。
浏览 1提问于2012-02-24得票数 0
回答已采纳
1回答
我想使用google图表来创建一个图表，如下所示：
GoogleChart.pie_400x200('Taco Bell'=>0,'Mediterranean'=>2,'Shivas'=>5)
给定一个对象，比如Results(name，count)。如何为上面看到的GoogleCharts结构创建一个对象？
谢谢
浏览 0提问于2011-06-29得票数 6
回答已采纳
我需要在我的StackedColumn (C#，Razor)项目中创建一个C#图表。环顾这个网站和其他网站，我看到一些类似的东西被要求提供不同的替代方案，但不是这个。
让我们看看一些常见的代码，这些代码创建了一个基本的列图：
var myChart = new Chart(width: 600, height: 400)
.AddTitle("Chart Title")
.AddSeries(
name: "Employee",
xValue: new[] { "Peter", "Andr
浏览 0提问于2016-03-08得票数 0
回答已采纳
我计划使用Google图表通过来自客户端的ajax请求来显示我的服务器上可用的数据。但是我不知道如何为Google API设置回调方法，因为回调方法将有一些参数来填充图表。
这个方法需要有参数，因为我想写的方法是泛型的，也可以在其他地方使用。
浏览 0提问于2011-10-03得票数 0
回答已采纳
我使用google图表创建了一个条形图，这是一个核心图表
我已经尝试过让条形图改变颜色，并向它添加额外的工具提示信息，这样工具提示就会显示更多的信息。
我已经看过谷歌文档了，我看不出我做错了什么
为了便于阅读，这是我的代码在源代码上的输出。
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var exam
浏览 0提问于2018-10-27得票数 1
回答已采纳
我想使我的直方图上的颜色不透明，并且我想在图表中添加一个图例。我已经看到了很多这方面的资源，但是我在我的直方图上使用了groupby方法。我不确定如何为groupby上的每个因子添加颜色 sia_table.groupby('subreddit')['sia_compound'].hist(bins = 20)
浏览 15提问于2019-10-18得票数 0
显然，Google能够从Google嵌入图表(我指的是基于“正常”范围的图表，而不是Google中的图表)。因此，如果我改变图表的颜色，例如，我可以更新这些变化在谷歌文档。
不幸的是，Google没有脚本记录器特性，而且当我从Google记录复制/粘贴(当然，我只打算使用记录功能来帮助)时，它没有帮助。
我相信我应该通过它的url (至少是它的id部分)将图表作为任何对象嵌入。我知道appendImage() (Body类)之类的方法，但我无法找到图表的等效值。
有人能给我一些使用Google脚本(不是来自API)的指导吗？
谢谢你的见解！
浏览 5提问于2020-11-03得票数 0
1回答
我想为数据集mtcar绘制一个平行的协调图。我想在颜色上设置一个变量。我用了密码：
library(GGgally)
ggparcoord(data=mtcars, columns=1:10 , groupColumn=11)
它生成了图形，但是所有的线条都是蓝色的。然而，由于使用了相似的颜色，我在理解图表和进行观察时遇到了困难。如何为相同的变量引入一组不同的颜色，如蓝色、绿色和红色etx。
浏览 4提问于2015-03-11得票数 0
回答已采纳
我想要创建一个图表，它将有一个梯度的颜色，在它下面作为一个区域。当它降落在不同的数据值上时，它会发生变化，在滴答上会有不同的颜色。渐变将从滴答色变成白色。以下是它的外观：
我成功地使用“高图区”创建了不同的区域颜色，并使用“High图表fillColor”设置了填充梯度。现在我不明白如何为每个区域生成不同的填充颜色。这是我现在的图表：
这是我与问题相关的代码的一部分：
this.chartOptions = {
...
plotOptions: {
area: {
pointStart: chartStart,
浏览 1提问于2021-07-26得票数 0
回答已采纳
1回答
比较栏图
、
我试着在谷歌单张上做一张图表，比较两个人花了多少钱买东西。我要找的是有几个成本类别的图表(杂货、外出就餐、宠物等等)。以及图表中列的特定颜色。无论谁在这一类别中是阳性的，他们的颜色都将被用来给图表中的列涂颜色(例如: Joe支付10美元，Julie支付20美元，所以Julie是+10美元，这将导致该类别中的列变成紫色或其他什么的)。如果支付的金额甚至在一个类别中，那么该类别中就不会有一个列。
我有一个单元格列，它使用=abs(sum(B2-C2))的概念，然后根据if $B2>$C2和反之亦然地应用一些格式化条件。这是可行的，但我只想弄清楚如何把它放到一个图形中，使它更直观。我意识到我可
浏览 0提问于2019-02-09得票数 0
我想就Excel (2003)图表中的两个主要问题寻求您的帮助：
1)我想要创建一个有25个网格的图表(x轴上有5个，y轴上有5个)。网格数目不得改变，即数据不应影响网格的大小、长度和数目(使用几个不同的工作表作为图表的输入)。如何才能创建这样的图表而不依赖于数据有不同的网格长度？
2)我需要一个有25个网格的图表，每个网格的颜色不同，例如右上角的3个网格是红色的，左下角的3个网格是绿色的，所有网格之间的网格都是白色的。我读过一些关于创建带有象限背景的图表的文章，即4个网格，每个网格都有不同的颜色。但我想知道如何为25个网格创建多色背景？
非常感谢！！
致以敬意，
浏览 8提问于2012-11-27得票数 3
我有一个已经填充了数据的Google Chart Table。我只想为每一列添加颜色。
现在我有：
dataTable.setCell(1,1,{'style': 'background-color: red;'})
但这打破了图表。
谢谢。
浏览 2提问于2015-08-27得票数 0
1回答
我正在为我的网站工作，我想创建这样一个图表，其中的每个单元格有一个不同的颜色，如下图所示：
我在Google Charts和其他各种基于javascript的api中搜索过图表，但没有找到任何结果。任何解决办法都是热烈欢迎的。
浏览 1提问于2014-08-26得票数 0
回答已采纳
1回答
我有反应的网页应用程序使用顶端图表显示烛台和额外的移动平均线。除了线条颜色，一切都很好。我将颜色数组传递给图表选项，如下所示：
const options = {
colors: ['#03A9F4', '#03A9F4', ...],
}
我知道我这样做是正确的，因为当我切换到不使用烛台时，颜色会受到尊重。
我现将图表绘制如下：
<ReactApexChart
series={series}
options={options}
type="candlestick"
height={550}
/>
浏览 8提问于2022-01-13得票数 0
我通过视图和视图Dataviz模块显示了一系列饼图。我还试验了使用(交互式) 谷歌图表图表引擎的其他图表模块。
当这些图表是通过它们与视图模块的集成生成时，我想知道如何通过使用Google中的选项(如颜色、图例、字体大小等)来更改图表输出。
我已经查看了各个图表模块的代码，但我不确定在哪里可以自定义图表的输出。
浏览 0提问于2013-04-02得票数 4
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
