javascript 从哪里可以得到谷歌图表使用的所有颜色模式的列表？

u4dcyp6a 于 2023-01-29 发布在 Java

关注(0)|答案(5)|浏览(142)

问题很简单，默认情况下，Google Charts会为图表上的因子使用一些预定义的颜色。

蓝色#3366CC
红色编号DC3912
黄色编号FF9900
绿色编号109618

好吧。当你的图表必须在图表上显示更多的因子时，那么它需要：

紫色编号990099
海蓝色#0099C6
粉粉色#DD4477

上面的名字是我自己给的，所以它们不是官方的，但是颜色值是官方的。问题是接下来是什么颜色？接下来的颜色列表是无限的吗？
有人能告诉我在哪里可以找到所有的来源吗？我看了整个手册，什么也没找到。我可以在小提琴上渲染一堆因素，但我觉得它不会涵盖所有可能的颜色。
谢谢你的帮助。
我想要获得这些颜色值的原因是，我想要与Google Charts并行使用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 Chars使用的数组替换color.pattern数组。
谢谢!

JavaScript

来源：https://stackoverflow.com/questions/32131668/from-where-can-i-get-list-of-all-color-patterns-used-by-google-charts

5条答案

按热度按时间

balp4ylt1#

这是一个老帖子，但我在网上找不到完整的列表。显然谷歌使用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

赞(0）回复(0）举报 2023-01-29

hl0ma9xz2#

这两个资源可能会帮助您与谷歌图表颜色列表

https://www.google.com/design/spec/style/color.html#color-color-palette
http://there4.io/2012/05/02/google-chart-color-list/

赞(0）回复(0）举报 2023-01-29

k10s72fa3#

这不是一个直接的答案，但如果有人想为图表寻找一组较深的颜色，并像我一样到达这里，这里是使用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'
    ]

赞(0）回复(0）举报 2023-01-29

6gpjuf904#

好吧。小提琴是这样的：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号）。我很肯定，我不会使用这么多的因素。我的情况下，我会简单地把更多的因素，这小提琴检查下一个颜色。
我将简单地使用颜色选择器复制和粘贴颜色到我的C3。比你麦威尔逊无论如何。我会给予你赞成票。

赞(0）回复(0）举报 2023-01-29

91zkwejq5#

LouiseS答案，但经过美化（Javascript）

// Google chart colors
var colours = ['#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'];

突出显示以供目视参考

赞(0）回复(0）举报 2023-01-29

我来回答

javascript 从哪里可以得到谷歌图表使用的所有颜色模式的列表？

5条答案

相关问题

热门标签

最新问答