Question

我想设置不同的列颜色。列中仅显示一种颜色。我如何在Google列颜色中设置动态颜色。如何设置每列颜色的动态颜色。

<script type="text/javascript">
            google.load("visualization", "1", { packages: ["corechart"] });
            google.setOnLoadCallback(drawChart);
            function drawChart() {
                $.ajax({
                    type: "POST",
                    url: "/Dashboard/mTotalFileRefWise",
                    data: JSON.stringify({ PhaseID: $("#Projectlist").val() }),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (r) {
                        var data = google.visualization.arrayToDataTable(r);
                        var options = {
                            title: '',
                            legend: { position: 'none', maxLines: 9 },
                            colors: ['#00c0ef', '#DD4B39', '#DD4B39'],
                             width:500,
                             height:340,
                            animation: {
                                duration: 2000,
                                easing: 'out',
                                startup: true,

                            }
                        };
                        var chart = new google.visualization.ColumnChart($("#TotalFilesRefwise")[0]);
                        chart.draw(data, options);
                    },
                    failure: function (r) {
                        alert(r.d);
                    },
                    error: function (r) {
                        alert(r.d);
                    }
                });
            }
            $("#Projectlist").change(function () {
                drawChart();
            });
        </script>

Answer 1

colors配置选项将数组中的每种颜色应用于数据表中的每个系列
系列由数据表中的y轴列定义，
这是x轴之后的每一列，第一列
由于您只有一个y轴列，因此仅应用一种颜色

另一种应用颜色的方法是在数据表中使用style column role

这使您可以在数据表中为每个条形定义颜色，
例如...

[
  ["Category","TotalAmount",{type:'string',role:'style'}],  // <-- style role
  ["COST OF LAND",1572.2,'#00c0ef'],  // <-- bar color
  ["DEVELOPMENT CHARGES",54.1,'#DD4B39']
]

如果您不想更改数据的构建方式，
您可以使用数据视图分配颜色...

在这里，将创建一个数据视图，并添加一个计算列以确定颜色。
颜色是根据数据表的行索引从colors配置选项中提取的...
（只需确保颜色数与数据表中的行数相同）

var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
  role: 'style',
  type: 'string',
  calc: function (dt, row) {
    return options.colors[row]
  }
}]);

请参阅以下工作片段...

google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var r = [["Category","TotalAmount"],["COST OF LAND",1572.2],["DEVELOPMENT CHARGES",54.1]];
  var data = google.visualization.arrayToDataTable(r);
  var options = {
    title: '',
    legend: { position: 'none', maxLines: 9 },
    colors: ['#00c0ef', '#DD4B39', '#DD4B39'],
    width:500,
    height:340,
    animation: {
      duration: 2000,
      easing: 'out',
      startup: true,
    }
  };

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    role: 'style',
    type: 'string',
    calc: function (dt, row) {
      return options.colors[row]
    }
  }]);

  var chart = new google.visualization.ColumnChart($("#TotalFilesRefwise")[0]);
  chart.draw(view, options);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="TotalFilesRefwise"></div>

注释：需要使用正确版本的Google图表，
jsapi库应该不再使用...

新图书馆...

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

这只会更改load和setOnLoadCallback语句，
参见上面的代码段...

谷歌柱形图更改栏颜色不能动态设置

1 个答案: