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

请参阅以下代码段...

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>

对于load语句，删除这些行...

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

并替换为这些...

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

不同颜色的酒吧

1 个答案: