从哪里可以获得Google Charts使用的所有颜色模式的列表?

时间:2015-08-21 02:56:35

标签: javascript google-visualization

问题很简单,默认情况下,Google图表会使用某些预定义颜色作为图表上的因子。前四个是:

  • 蓝色#3366CC
  • 红色#DC3912
  • 黄色#FF9900
  • 绿色#109618

精细。当图表必须在图表和图例上显示更多因子时,需要

  • 紫色#990099
  • 海蓝#0099C6
  • 粉色粉色#DD4477

以上名称由我自己提供,因此它们不是官方的,但颜色值是。重点是接下来的颜色是什么?下一个颜色列表是无限的吗?

有人可以指向我可以找到它的来源吗?我完整地阅读了整本手册。我可以在小提琴中渲染一堆因素,但我觉得它不会覆盖所有可能的颜色。

感谢您的帮助。

我想获得这些颜色值的原因是我希望在与谷歌图表并行使用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']
    }
});

显然,我想将color.pattern数组替换为Google Chars使用的数据。

谢谢!

4 个答案:

答案 0 :(得分:1)

答案 1 :(得分:0)

行。所以这是小提琴: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。 无论如何,比你mwilson。我会给你upvote。

答案 2 :(得分:0)

这是一篇过时的文章,但我在网上找不到完整的列表。 显然,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

答案 3 :(得分:0)

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