1

需要创建一个柱形图，其中 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 轴中的项目名称显示每个项目？

4

1 回答 1

0

有几种颜色条的方法


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


但是，如果每个系列只有一个值，多列将导致系列在 x 轴上分组，
这将导致列偏离标签中心
以纠正此问题，请使用选项 -->isStacked: true

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

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

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']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

2）另一种为列着色的方法是使用样式列角色

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

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

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']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

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

  chartArea: {
    bottom: 80
  },

看上面的片段...

于 2017-09-18T12:25:05.537 回答