将颜色分配给Google图表中的特定列 [英] Assigning Colors to Specific Columns in Google Charts

问题描述

我想为Google条形图中的每一列指定一个特定的颜色。
我想知道什么是最好的方法去做这件事。我想为每个数据点添加一个颜色十六进制代码。

I would like to assign a specific color to each column in a Google Bar Chart. I was wondering what the best way is to go about doing this. I would like to include a color Hex code to each data point.

我在下面有一个jsfiddle：
http://jsfiddle.net/zYS27/

I have a jsfiddle below: http://jsfiddle.net/zYS27/

var option = {
  animation: {duration: 1000, easing: 'out',},
  hAxis: {textStyle:{
  fontName: 'Nunito',fontSize: '16' }},
  legend: { position: "none" },
  tooltip: {trigger: "none", textStyle:{
  fontName: 'Nunito',fontSize: '16' }, isHtml: true},
  bar: {groupWidth: "80%"},
  vAxis: {format:'0%', minValue:0, viewWindowMode:'maximized', textStyle:{
  fontName: 'Nunito',fontSize: '16' }, maxValue:1},
            };

    var formatter = new google.visualization.NumberFormat({
        fractionDigits: 3,
        pattern:'#,###%',
        });
  var data = new google.visualization.DataTable();    
  data.addColumn('string', 'N');
  data.addColumn('number', 'Value');
  data.addRow(['Orange', 0]);
  data.addRow(['Red', 0]);
  data.addRow(['Green', 0]);
  data.addRow(['Blue', 0]);
  data.addRow(['Purple', 0]);
  // Create and draw the visualization.
  var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
  chart.draw(data, option);
  data.setValue(0, 1, 0.1);
  data.setValue(1, 1, 0.3);
  data.setValue(2, 1, 0.4);    
  data.setValue(3, 1, 0.4);
  data.setValue(4, 1, 0.4);
  chart.draw(data, option);

  }

  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);

推荐答案

使用样式角色列：

var data = new google.visualization.DataTable();    
data.addColumn('string', 'N');
data.addColumn('number', 'Value');
data.addColumn({type: 'string', role: 'style'});
data.addRow(['Orange', 0, 'color: #FF8000']);
data.addRow(['Red', 0, 'color: #FF0000']);
data.addRow(['Green', 0, 'color: #00FF00']);
data.addRow(['Blue', 0, 'color: #0000FF']);
data.addRow(['Purple', 0, 'color: #800080']);

小提琴： http://jsfiddle.net/asgallant/zYS27/1/

这篇关于将颜色分配给Google图表中的特定列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！