Question

需要创建包含x轴项目和y轴值的柱形图，在图表中显示列时我需要以不同颜色显示每个项目（每列）并在图例中显示此详细信息，我使用了下面的代码

 var jData =GetData();

    var tdata = new google.visualization.DataTable();
    tdata.addColumn('string', 'items');
    tdata.addColumn('number', 'values');

    for (var i = 0; i < jData.length; i++) {
        tdata.addRow([jData[i].Item, jData[i].Value]);
    }

    var options = {
        hAxis: {

        },
        vAxis: {

        }
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('div1'));
    chart.draw(tdata, options);

渲染图形时显示如下

如果我使用下面的代码添加x轴和y轴文本，它将不会在x轴上显示每个项目名称，

var options = {
        hAxis: {
            title: 'Item'
        },
        vAxis: {
            title: 'value'
        }
    };

所有项目名称都不在x轴上呈现，

如何以x轴显示不同颜色和x轴名称和项目名称的每个项目？

Answer 1

有两种颜色方法

1）默认情况下，数据表中的每个系列都是不同的颜色
如果所有y轴值都在同一列中，则它们将是相同的颜色这意味着您需要在数据表中添加多个列

然而，拥有多列将导致系列＆＃39;在x轴上分组
如果每个系列只有一个值，
这将导致色谱柱偏离标签
要更正此问题，请使用选项 - ＆gt; isStacked: true

请参阅以下工作代码段...

注意：在此示例中，colors选项用于提供自定义颜色
删除此选项以使用图表的默认颜色

＆＃13;

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'x');
    data.addColumn('number', 'y0');
    data.addColumn('number', 'y1');
    data.addColumn('number', 'y2');
    data.addColumn('number', 'y3');
    data.addColumn('number', 'y4');
    data.addColumn('number', 'y5');
    data.addRows([
       ['Item 001', 200, null, null, null, null, null],
       ['Item 002', null, 220, null, null, null, null],
       ['Item 003', null, null, 240, null, null, null],
       ['Item 004', null, null, null, 260, null, null],
       ['Item 005', null, null, null, null, 280, null],
       ['Item 006', null, null, null, null, null, 300]
    ]);

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, {
      chartArea: {
        bottom: 80
      },
      colors: ['#e53935', '#8e24aa', '#1e88e5', '#43a047', '#ffb300', '#f4511e'],
      hAxis: {
        slantedText: true,
        title: 'Item'
      },
      vAxis: {
        title: 'value'
      },
      isStacked: true,
      height: 400
    });
  },
  packages: ['corechart']
});

＆＃13;

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

＆＃13;

2）另一种着色列的方法是使用style column role

但是，样式列角色不会与图例同步

请参阅以下工作代码段...

＆＃13;

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'x');
    data.addColumn('number', 'y0');
    data.addColumn({type: 'string', role: 'style'});
    data.addRows([
       ['Item 001', 200, '#e53935'],
       ['Item 002', 220, '#8e24aa'],
       ['Item 003', 240, '#1e88e5'],
       ['Item 004', 260, '#43a047'],
       ['Item 005', 280, '#ffb300'],
       ['Item 006', 300, '#f4511e']
    ]);

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, {
      chartArea: {
        bottom: 80
      },
      hAxis: {
        slantedText: true,
        title: 'Item'
      },
      vAxis: {
        title: 'value'
      },
      height: 400
    });
  },
  packages: ['corechart']
});

＆＃13;

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

＆＃13;

注意：如果x轴标签被切断，请使用以下选项以留出更多空间......

  chartArea: {
    bottom: 80
  },

见上面的片段......

带有legands的每个项目的不同颜色条形图

1 个答案: