从谷歌图表中删除列键

时间:2016-08-14 08:13:36

标签: charts google-visualization column-chart

我正在使用列谷歌图表。我需要更改列键的方向,在下面的图像中突出显示为红色圆圈。

enter image description here

所以我想要实现的目标

  1. 是否有任何属性,所以我可以更改方向,如顶部,底部或左侧,以便正确显示(收入),此时显示(R ...)。

  2. 如果无法更改方向,那么如何从图表中删除

1 个答案:

答案 0 :(得分:3)

您需要的是名为 chartArea

的属性

您可以控制显示的顶部,右侧,底部或左侧区域。
此处图表区域仅为图表的区域,不包括标签,图例或除图表本身以外的任何其他值。您可以缩小图表区域,以便标签/图例可以完全显示。

chartArea: {
    height: '500',
    left: 0,
    right: 0,
    top: 30,
    bottom: 0
},

关于图例定位,您可以使用

更改图例的位置
 legend: {
              position: 'left'
          }

要删除传说,请使用

legend:{position: 'none'}




请参阅以下代码段或此JSFIDDLE,了解其工作原理。



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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Submitter', 'Count'],
    ['Service', 168],
    ['NAME 1', 42],
    ['NAME 2', 36],
    ['NAME 3', 35],
    ['NAME 4', 34],
    ['NAME 5', 30],
    ['NAME 6', 24],
    ['NAME 7', 21],
    ['NAME 8', 18]
  ]);
  var options = {
    pieSliceText: 'percentage',
    legend: {
      position: 'none'
    },
    height: '500',
    chartArea: {
      height: '500',
      left: 0,
      right: 0,
      top: 30,
      bottom: 0
    },
  };
  var chart = new google.visualization.PieChart(document.getElementById('chart6_div'));
  chart.draw(data, options);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart6_div"></div>
&#13;
&#13;
&#13;