不同颜色的酒吧

Question

我有一张 2 列 3 行的表（encours | 15 ; gele|10 ; clos|14） 我正在使用谷歌图表栏 问题是我想让条使用不同的颜色 当我使用这个 颜色：['红色'，'黄色'，'蓝色']， 所有的条都是红色的，我不想要那个 我希望你能理解我，你会在下面找到我的代码

  <script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var options = {
            title: 'Graph Evolution (ticket encours/clos)',
            width: 1200,
            height: 800,
            bar: { groupWidth: "95%" },
            seriesType: 'bars',
            series: { 5: { type: 'line' } },
            colors: ['red','yellow', 'blue'],
        };


        $.ajax({
            type: "POST",
            url: "multicolumn.aspx/GetChartData",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var data = google.visualization.arrayToDataTable(r.d);
                var chart = new google.visualization.BarChart($("#chart_div")[0]);

             chart.draw(data, options);
            },
            failure: function (r) {
                alert(r.d);
            },
            error: function (r) {
                alert(r.d);
            }
        });

            }
       </script>  

Answer 1

colors 选项将数组中的每种颜色分配给数据表中的每个系列。
其中系列是数据表中的列，位于 x 轴之后。

例如，为了有 3 种颜色（使用 colors 选项），
除了 x 轴或第一列之外，您将需要在数据表中有 3 列。

例如

x,        encours, gele, clos
category, 15,      10,   14

相反，你只有一个系列......

x,       category
encours, 15
gele,    10
clos,    14

因此，colors 选项将不起作用。
我们需要改用style column role。

这允许我们在数据表中分配颜色...

x,       category, style
encours, 15,       red
gele,    10,       yellow
clos,    14,       blue

您可以在数据中包含颜色，
对于样式列，对列标题使用对象表示法...

[
  ['category', 'value', {type: 'string', role: 'style'}],
  ['encours', 15, 'red'],
  ['gele', 10, 'yellow'],
  ['clos', 14, 'blue'],
]

或者我们可以使用数据视图，其中包含样式角色的计算列。

var view = new google.visualization.DataView(data);
view.setColumns([
  0, 1, {
    calc: function (dt, row) {
      var category = dt.getValue(row, 0);
      var color;
      switch (category) {
        case 'encours':
          color = 'red';
          break;

        case 'gele':
          color = 'yellow';
          break;

        case 'clos':
          color = 'blue';
          break;
      }
      return color;
    },
    type: 'string',
    role: 'style'
  }
]);

看下面的sn-p...

google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
    var options = {
        title: 'Graph Evolution (ticket encours/clos)',
        width: 1200,
        height: 800,
        bar: { groupWidth: "95%" },
        seriesType: 'bars',
        series: { 5: { type: 'line' } },
        colors: ['red','yellow', 'blue'],
    };


    $.ajax({
        type: "POST",
        url: "multicolumn.aspx/GetChartData",
        data: '{}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (r) {
            var data = google.visualization.arrayToDataTable(r.d);
            var view = new google.visualization.DataView(data);

            view.setColumns([
              0, 1, {
                calc: function (dt, row) {
                  var category = dt.getValue(row, 0);
                  var color;
                  switch (category) {
                    case 'encours':
                      color = 'red';
                      break;

                    case 'gele':
                      color = 'yellow';
                      break;

                    case 'clos':
                      color = 'blue';
                      break;
                  }
                  return color;
                },
                type: 'string',
                role: 'style'
              }
            ]);

            var chart = new google.visualization.BarChart($("#chart_div")[0]);
            chart.draw(view, options);
        },
        failure: function (r) {
            alert(r.d);
        },
        error: function (r) {
            alert(r.d);
        }
    });
}

---

注意：您不应该使用旧版本的谷歌图表。
你需要update 到较新的版本。

这只会更改load 语句。

从您的页面中删除以下脚本...

<script src="https://www.google.com/jsapi"></script>

并替换为...

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

对于加载语句，删除这些行...

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

并用这些替换...

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