不同颜色的酒吧

Question

我有一个 table 有 2 列和 3 行（encours | 15 ; gele|10 ; clos|14）我正在使用 google 图表栏问题是我想为条形图使用不同的颜色我什么时候用这个颜色：['red'、'yellow'、'blue']、所有的条都是红色的，我不想要那个我希望你理解我，你会在下面找到我的代码

  <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 选项将数组中的每种颜色分配给数据中的每个系列 table。
其中系列是数据 table 中的一列，位于 x-axis 之后。

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

例如

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

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

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

因此，colors 选项将不起作用。
我们需要使用 style column role 来代替。

这允许我们在数据中指定颜色 table...

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

您可以在数据中包含颜色，
对于样式列，对列标题使用 object 符号...

[
  ['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'
  }
]);

请参阅以下代码片段...

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);
        }
    });
}

注意： 你不应该使用旧版本的 google 图表。
您需要 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);

不同颜色的酒吧

bar with different colors

charts

google-visualization