带有自定义颜色的动态数据谷歌条形图

Question

我正在调用一个 Java servlet 来返回我将在谷歌图表中显示的数据。这是我的代码：

    var colorPalate = ["#0d2713", "#8b9061", "#4cb274", "#898cca", "#02a4cf", "#d78e5d", "#87bd16", "#84b971", "#bacabe", "#766499", "#e51d85", "#287066", "#792b1b", "#401bec", "#0fdc3d", "#f6ade7", "#8fb4ad", "#de8456", "#16be99"];           
$.get(ajaxURL, function(responseText){
                var j = $.parseJSON(JSON.stringify(responseText));
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Person');
                data.addColumn('number', 'Time');
                for( i=0;i < j.recordList.length ;i++){                      

                    data.addRows([
                        [j.recordList[i]['Affiliate'], Number(j.recordList[i]['Time'])]

                    ]);
                }
                var options = {'title':'Effort - ' + value,
                         'width':800,
                         'height':660,
                         is3D: true,
                         colors: colorPalate
                     };

                // Instantiate and draw our chart, passing in some options.
                var chart;
                if($('input[name=chartType]:checked').val() == "Pie"){
                    chart = new google.visualization.PieChart(document.getElementById('chart_div'));
                }else{
                    chart = new google.visualization.BarChart(document.getElementById('chart_div'));
                }

                chart.draw(data, options);

            });

它适用于饼图，我可以在 colorPalate 中看到所有颜色，但对于条形图，我只能获得第一种颜色，据说是因为它们都在同一个系列中。

我知道我可以使用这样的代码：

 var data = google.visualization.arrayToDataTable([
    ['Year', 'Visitations', { role: 'style' } ],
    ['2010', 10, 'color: gray'],
    ['2020', 14, 'color: #76A7FA'],
    ['2030', 16, 'opacity: 0.2'],
    ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
    ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
  ]);

但我不能使这种动态，至少我不知道如何。其他建议包括预先格式化要直接插入的 json，但他们希望我组织 json 数组的方式目前让我有点困惑。任何人都知道如何使该 colorPalate 数组应用于条形图同时保持数据动态？

更新：

我现在正在为条形图尝试这个：

data.addColumn("string", "Group")
                    for( i=0;i < j.recordList.length ;i++){  
                        data.addColumn("number", j.recordList[i]['Affiliate']);
                    }
                    data.addRows([
                        ["Time"] 
                    ]);
                    for( i2=5;i2 < j.recordList.length ;i2++){
                        data.addRows([
                        [Number(j.recordList[i2]['Time'])] 
                    ]);
                    }
                    chart = new google.visualization.BarChart(document.getElementById('chart_div'));
var options = {'title':'Effort - ' + value,
                         'width':800,
                         'height':660,
                         is3D: true,
                         colors: colorPalate
                     };
                chart.draw(data, options);

我收到以下错误：

未捕获的错误：给定大小不同于 15 的行（ 表中的列）。

编辑：这是行数据：

[“时间”,468.1666666666667,266.5333333333333,158,26.25,68.9​​8,31.25,24.25,26.29,13,94.5,3.5,4,11.25,9]

Answer 1

正如您所指出的，colors 配置选项中的每种颜色都映射到特定系列

第一种颜色 = 系列 0，
第二种颜色 = 系列 1 等...

要使用此选项，值必须在列中，而不是在行中

请参阅以下工作 sn-p...

google.charts.load('current', {
  callback: function () {
    var container = document.getElementById('chart_div');
    var chart = new google.visualization.BarChart(container);

    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn('string', 'Person');
    dataTable.addColumn('number', '2010');
    dataTable.addColumn('number', '2020');
    dataTable.addColumn('number', '2030');
    dataTable.addColumn('number', '2040');
    dataTable.addColumn('number', '2050');

    dataTable.addRows([
      ['Time', 10, 14, 16, 22, 28]
    ]);

    chart.draw(dataTable, {
      colors: ["#0d2713", "#8b9061", "#4cb274", "#898cca", "#02a4cf", "#d78e5d", "#87bd16", "#84b971", "#bacabe", "#766499", "#e51d85", "#287066", "#792b1b", "#401bec", "#0fdc3d", "#f6ade7", "#8fb4ad", "#de8456", "#16be99"],
      bar: {
        gap: 4
      }
    });
  },
  packages:['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

编辑

这一行会报错，因为只提供了一列...

data.addRows([
  ["Time"] 
]);

与for 循环相同，仅添加一列...

for(i2=5; i2 < j.recordList.length; i2++){
  data.addRows([
    [Number(j.recordList[i2]['Time'])] 
  ]);
}

为方便起见，请使用临时数组 ([]) 来构建行

然后使用addRow 而不是addRows

看下面的sn-p...

data.addColumn("string", "Group")

for(i=0; i < j.recordList.length; i++){
  data.addColumn("number", j.recordList[i]['Affiliate']);
}

var rowData = ["Time"];

for(i2=5; i2 < j.recordList.length; i2++){
  rowData.push(Number(j.recordList[i2]['Time']));
}

data.addRow(rowData);

chart = new google.visualization.BarChart(document.getElementById('chart_div'));
var options = {
  'title':'Effort - ' + value,
  'width':800,
  'height':660,
  is3D: true,
  colors: colorPalate
};

chart.draw(data, options);

编辑#2

不确定我是否正确跟随，在以下行中......

var j = $.parseJSON(JSON.stringify(responseText));

如果j 等于...

["Time",468.1666666666667,266.5333333333333,158,26.25,68.98,31.25,24.25,26.29,13,94.5,3.5,4,11.25,9]

然后看下面的工作 sn-p...

google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

function drawChart() {
  var colorPalate = ["#0d2713", "#8b9061", "#4cb274", "#898cca", "#02a4cf", "#d78e5d", "#87bd16", "#84b971", "#bacabe", "#766499", "#e51d85", "#287066", "#792b1b", "#401bec", "#0fdc3d", "#f6ade7", "#8fb4ad", "#de8456", "#16be99"];

  var j = ["Time",468.1666666666667,266.5333333333333,158,26.25,68.98,31.25,24.25,26.29,13,94.5,3.5,4,11.25,9];

  var data = new google.visualization.DataTable();

  for (var i = 0; i < j.length; i++) {
    if (i === 0) {
      data.addColumn("string", "Group");
    } else {
      data.addColumn("number", "Column " + i); // replace with affiliate
    }
  }

  data.addRow(j);

  chart = new google.visualization.BarChart(document.getElementById('chart_div'));
  var options = {
    'title':'Effort - ',
    'width':800,
    'height':660,
    is3D: true,
    colors: colorPalate
  };

  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

否则，请分享j的内容...