从哪里可以获得 Google 图表使用的所有颜色模式的列表?
From where can I get list of all color patterns used by Google Charts?
问题很简单,默认情况下Google图表对图表上的因素使用了一些预定义的颜色。前四个是:
- 蓝色#3366CC
- 红色#DC3912
- 黄色#FF9900
- 绿色#109618
很好。当您的图表必须在图表上显示更多因素时,需要:
- 紫色#990099
- 海蓝色#0099C6
- 淡粉色#DD4477
以上名称是我自己起的,所以它们不是官方的,但颜色值是。重点是下一个是什么颜色?接下来的颜色列表是无限的吗?
谁能指出我在哪里可以找到所有这些资源的来源?我浏览了整个手册,但一无所获。我可以在 fiddle 中渲染一堆因素,但我觉得它不会涵盖所有可能的颜色。
感谢您的帮助。
我想要获得这些颜色值的原因是我想与 Google 图表并行使用 C3js
/ D3js
并保持一致性我必须提供D3 带有预定义颜色列表,例如:
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25],
['data3', 130, 220, 140, 200, 250, 450],
['data4', 250, 320, 210, 240, 215, 225],
['data5', 430, 500, 400, 280, 290, 350],
['data6', 100, 120, 310, 340, 415, 225]
]
},
color: {
pattern: ['#1f77b4', '#aec7e8', '#ff7f0e', '#ffbb78', '#2ca02c', '#98df8a', '#d62728', '#ff9896', '#9467bd', '#c5b0d5', '#8c564b', '#c49c94', '#e377c2', '#f7b6d2', '#7f7f7f', '#c7c7c7', '#bcbd22', '#dbdb8d', '#17becf', '#9edae5']
}
});
显然我想用 Google 字符使用的替换 color.pattern
数组。
谢谢!
可以帮助您使用 Google 图表颜色列表的两个资源
好的。所以这是 fiddle:http://jsfiddle.net/slick/xcpxz738/
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['factor1', 1],
['factor2', 1],
['factor3', 1],
['factor4', 1],
['factor5', 1],
['factor6', 1],
['factor7', 1],
['factor8', 1],
['factor9', 1],
['factor10', 1],
['factor11', 1],
['factor12', 1],
['factor13', 1],
['factor14', 1],
['factor15', 1],
['factor16', 1],
['factor17', 1],
['factor18', 1],
['factor19', 1],
['factor20', 1],
['factor21', 1],
['factor22', 1],
['factor23', 1],
['factor24', 1],
['factor25', 1],
]);
25 个因素,第 21 个不使用蓝色(从第 1 个开始)。我很确定我不会使用这么多因素。在这种情况下,我将简单地将更多因素添加到此 fiddle 以检查下一个颜色。
我将简单地使用颜色选择器将颜色复制并粘贴到我的 C3。
反正比你mwilson。我给你点赞。
这是一个旧的 post 但我无法在网上找到完整的列表。
显然 Google 使用 31 种颜色然后循环(第 32 种颜色是第一种蓝色)。
这是完整列表:
#3366cc
#dc3912
#ff9900
#109618
#990099
#0099c6
#dd4477
#66aa00
#b82e2e
#316395
#994499
#22aa99
#aaaa11
#6633cc
#e67300
#8b0707
#651067
#329262
#5574a6
#3b3eac
#b77322
#16d620
#b91383
#f4359e
#9c5935
#a9c413
#2a778d
#668d1c
#bea413
#0c5922
#743411
这不是一个直接的答案,但如果有人会为图表寻找一组较深的颜色并像我一样来到这里,这里是使用 https://pinetools.com/darken-color 创建的列表和提供的颜色列表来自 LouiseS:
colors: ['#264c99', '#a52a0d', '#bf7200',
'#0c7012', '#720072', '#007294',
'#b72153', '#4c7f00', '#8a2222',
'#244a6f', '#723372', '#197f72',
'#7f7f0c', '#4c2699', '#ac5600',
'#680505', '#4b0c4d', '#256d49',
'#3f577c', '#2c2e81', '#895619',
'#10a017', '#8a0e62', '#d30b79',
'#754227', '#7e930e', '#1f5969',
'#4c6914', '#8e7b0e', '#084219',
'#57270c'
]
问题很简单,默认情况下Google图表对图表上的因素使用了一些预定义的颜色。前四个是:
- 蓝色#3366CC
- 红色#DC3912
- 黄色#FF9900
- 绿色#109618
很好。当您的图表必须在图表上显示更多因素时,需要:
- 紫色#990099
- 海蓝色#0099C6
- 淡粉色#DD4477
以上名称是我自己起的,所以它们不是官方的,但颜色值是。重点是下一个是什么颜色?接下来的颜色列表是无限的吗?
谁能指出我在哪里可以找到所有这些资源的来源?我浏览了整个手册,但一无所获。我可以在 fiddle 中渲染一堆因素,但我觉得它不会涵盖所有可能的颜色。
感谢您的帮助。
我想要获得这些颜色值的原因是我想与 Google 图表并行使用 C3js
/ D3js
并保持一致性我必须提供D3 带有预定义颜色列表,例如:
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25],
['data3', 130, 220, 140, 200, 250, 450],
['data4', 250, 320, 210, 240, 215, 225],
['data5', 430, 500, 400, 280, 290, 350],
['data6', 100, 120, 310, 340, 415, 225]
]
},
color: {
pattern: ['#1f77b4', '#aec7e8', '#ff7f0e', '#ffbb78', '#2ca02c', '#98df8a', '#d62728', '#ff9896', '#9467bd', '#c5b0d5', '#8c564b', '#c49c94', '#e377c2', '#f7b6d2', '#7f7f7f', '#c7c7c7', '#bcbd22', '#dbdb8d', '#17becf', '#9edae5']
}
});
显然我想用 Google 字符使用的替换 color.pattern
数组。
谢谢!
可以帮助您使用 Google 图表颜色列表的两个资源
好的。所以这是 fiddle:http://jsfiddle.net/slick/xcpxz738/
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['factor1', 1],
['factor2', 1],
['factor3', 1],
['factor4', 1],
['factor5', 1],
['factor6', 1],
['factor7', 1],
['factor8', 1],
['factor9', 1],
['factor10', 1],
['factor11', 1],
['factor12', 1],
['factor13', 1],
['factor14', 1],
['factor15', 1],
['factor16', 1],
['factor17', 1],
['factor18', 1],
['factor19', 1],
['factor20', 1],
['factor21', 1],
['factor22', 1],
['factor23', 1],
['factor24', 1],
['factor25', 1],
]);
25 个因素,第 21 个不使用蓝色(从第 1 个开始)。我很确定我不会使用这么多因素。在这种情况下,我将简单地将更多因素添加到此 fiddle 以检查下一个颜色。
我将简单地使用颜色选择器将颜色复制并粘贴到我的 C3。 反正比你mwilson。我给你点赞。
这是一个旧的 post 但我无法在网上找到完整的列表。 显然 Google 使用 31 种颜色然后循环(第 32 种颜色是第一种蓝色)。 这是完整列表:
#3366cc
#dc3912
#ff9900
#109618
#990099
#0099c6
#dd4477
#66aa00
#b82e2e
#316395
#994499
#22aa99
#aaaa11
#6633cc
#e67300
#8b0707
#651067
#329262
#5574a6
#3b3eac
#b77322
#16d620
#b91383
#f4359e
#9c5935
#a9c413
#2a778d
#668d1c
#bea413
#0c5922
#743411
这不是一个直接的答案,但如果有人会为图表寻找一组较深的颜色并像我一样来到这里,这里是使用 https://pinetools.com/darken-color 创建的列表和提供的颜色列表来自 LouiseS:
colors: ['#264c99', '#a52a0d', '#bf7200',
'#0c7012', '#720072', '#007294',
'#b72153', '#4c7f00', '#8a2222',
'#244a6f', '#723372', '#197f72',
'#7f7f0c', '#4c2699', '#ac5600',
'#680505', '#4b0c4d', '#256d49',
'#3f577c', '#2c2e81', '#895619',
'#10a017', '#8a0e62', '#d30b79',
'#754227', '#7e930e', '#1f5969',
'#4c6914', '#8e7b0e', '#084219',
'#57270c'
]