【问题标题】:Remove column key from google chart从谷歌图表中删除列键
【发布时间】:2016-08-14 08:13:36
【问题描述】:

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

所以我想要达到的目标

  1. 是否有任何属性以便我可以更改顶部、底部或左侧的方向,以便它正确显示(收入)现在它显示(R...)。

  2. 如果方向不能改变,那么如何从图表中删除它

【问题讨论】:

    标签: charts google-visualization column-chart


    【解决方案1】:

    你需要的是名为chartArea的属性

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

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

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

     legend: {
                  position: 'left'
              }
    

    要完全删除图例,请使用

    legend:{position: 'none'}
    




    请参阅下面的 sn-p 或此 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>

    【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-05-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多