Question

从动态生成的数据数组中，我创建了一个DataTable，并希望在谷歌图表中将其设置为条形图。我将通过每个数据输入并创建标签和注释。

但是如何为色谱柱指定颜色？

我发现我需要使用角色＆＃34; style＆＃34;但无法弄清楚颜色的正确语法。

＆＃13;

var dataTable = google.visualization.arrayToDataTable(data);
        //Formatters
        var intergerFormatter = new google.visualization.NumberFormat({
            groupingSymbol: ",",
            fractionDigits: 0
        });
        for (var i = 0; i < data[0].length; i++) {
            intergerFormatter.format(dataTable, i);
        }

        var view = new google.visualization.DataView(dataTable);
        var cols = [0];
        for (var i = 1; i < data[0].length; i++) {
            cols.push({
                sourceColumn: i,
                type: "number",
                label: data[0][i]
            });
            cols.push({
                calc: "stringify",
                sourceColumn: i,
                type: "string",
                role: "annotation"
            });
            cols.push({
                //the following options are not working...
                role: "style: green"
                'color: green'
                color: "#109618"
            });
        }
        view.setColumns(cols);
        var chart = new google.visualization.ColumnChart(document.getElementById('PTCoverage'));
        chart.draw(view, options);

＆＃13;

Answer 1

使用calc函数返回计算列的值...

cols.push({
    calc: function () {
      return "green";
    },
    role: "style",
    type: "string"
});

<强>更新

如果特定列中每行的条形颜色应相同，则为不需要'style'列
请改用colors配置选项

colors选项采用一系列颜色，
每列/系列一个

一个系列......

colors: ["green"]

两个系列......

colors: ["green", "red"]

等等......

示例1

使用colors配置选项将颜色应用于列...

＆＃13;

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0', 'y1', 'y2'],
    ['Test 1',  500, 600, 1200],
    ['Test 2',  500, 600, 1200]
  ]);

  var options = {
    colors: ['green', 'red', 'blue']
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

＆＃13;

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

＆＃13;

示例2

使用'style'列更改列/系列1的颜色...
（基本上覆盖了"green"）

＆＃13;

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0', {role: 'style', type: 'string'}, 'y1', 'y2'],
    ['Test 1',  500, 'cyan', 600, 1200],
    ['Test 2',  500, 'magenta', 600, 1200]
  ]);

  var options = {
    colors: ['green', 'red', 'blue']
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

＆＃13;

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

＆＃13;

Answer 2

我现在设法实现了一个为evry bar返回新颜色的数组，见下文。

var colors = ['#66cc33','#3366CC','#DC3912','#FF9900','#DD4477','#994499','#0099C6','#109618'];
//...
cols.push({
    sourceColumn: i,
    calc: function () { 
        ccount++;
        return colors[ccount];
    },
    role: "style",
    type: "string"
});
//...

但这只会增加SR2中数据的颜色，SR3和SR4的颜色与之前一样，请参见图片（左图中的绿色，中间的粉红色和正面测试的右侧）

我认为可能是因为我的数据看起来像这样

        var data = [
            ['Release', 'Test Case missing', 'negative tested', 'untested', 'partially tested','tested with restrictions','part tested with restrictions', 'positive tested'],
            ['SR2', MS2PTStatusMask.TCmissing,MS2PTStatusMask.NegTested,MS2PTStatusMask.UnTested,MS2PTStatusMask.RestTested,MS2PTStatusMask.PartTestWithRest,MS2PTStatusMask.PartTested,MS2PTStatusMask.PosTested],
            ['SR3', MS3PTStatusMask.TCmissing,MS3PTStatusMask.NegTested,MS3PTStatusMask.UnTested,MS3PTStatusMask.RestTested,MS3PTStatusMask.PartTestWithRest,MS3PTStatusMask.PartTested,MS3PTStatusMask.PosTested],
            ['SR4', MS4PTStatusMask.TCmissing,MS4PTStatusMask.NegTested,MS4PTStatusMask.UnTested,MS4PTStatusMask.RestTested,MS4PTStatusMask.PartTestWithRest,MS4PTStatusMask.PartTested,MS4PTStatusMask.PosTested],
        ]

如何将颜色添加到其他栏？

通过角色：样式设置谷歌条形图的颜色

2 个答案: