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的行（数量为表中的列。）

编辑：这是行数据：

[＆＃34;时间＆＃34;，468.1666666666667,266.5333333333333,158,26.25,68.98,31.25,24.25,26.29,13,94.5,3.5,4,11.25,9]

Answer 1

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

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

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

请参阅以下工作代码段...

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

请参阅以下摘录...

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]

然后看下面的工作片段......

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 ...

的内容

带动态数据自定义颜色的Google条形图

1 个答案: