个人中心
gpt4 book ai didi

google-visualization - 如何避免在 Google 条形图中的 Bar 上重叠标签？

转载 作者：行者123 更新时间：2023-12-04 19:00:04 25 4
gpt4 key购买 nike

我正在创建一个堆叠条形图，需要在堆叠内显示标签。但是很少有标签重叠。供引用image

你能帮我如何避免使用谷歌图表重叠吗？

<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="chart_div"></div>
 <script type="text/javascript">
  google.charts.load('current', {packages: ['corechart', 'bar']});
  google.charts.setOnLoadCallback(drawStacked);

function drawStacked() {
      var data = new google.visualization.arrayToDataTable([['Time Period','XYZ',{ role: 'annotation'},'ABC',{ role: 'annotation'},{ role: 'annotation'},'Average'],
        ['Aug', 3754,'3754', 2089,'2089','5,843',4000],
        ['Sept', 900,'900', 200,'200', '100',4000],
		['Oct', 2000,'2000', 4900,'4900', '6000',4000],
		['Nov', 1700,'1700', 2200,'2200', '3900',4000],
		['Dec', 2400,'2400', 2089,'2200', '4600',4000]
      ]);

      var options = {
        title: 'Overview of the Tickets',
        isStacked: true,
		orientation: 'horizontal',
        hAxis: {
          title: 'Time Period',
          annotations: {}
           },
        vAxis: {
          title: 'Number of Tickets'
        },
		seriesType: 'bars',
      series: {2: {type: 'line'}}
      };

      var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
  </script>
</head>

</html>


问候，
斯里坎特

最佳答案

首先，您似乎有一个额外的 annotation数据中的列，
似乎不属于特定列

从上面的问题复制...

var data = new google.visualization.arrayToDataTable([
  [
    'Time Period',
    'XYZ',
    {role: 'annotation'},
    'ABC',
    {role: 'annotation'},
    {role: 'annotation'},  // <-- extra annotation?
    'Average'
  ],
  [
    'Aug',
    3754,
    '3754',
    2089,
    '2089',
    '5,843',  // <-- extra annotation?
    4000
  ],
  ...
]);

这可能是它如此困惑的部分原因

无论如何，请使用 annotations configuration option调整

配置选项可用于整个图表，或仅用于特定系列 
var options = {
  // entire chart
  annotations: {
    textStyle: {
      fontSize: 10
    }
  },
  series: {
    0: {
      // series 0
      annotations: {
        stem: {
          length: 0
        },
      },
    },
    1: {
      // series 1
      annotations: {
        stem: {
          length: 16
        }
      },
    },
  }
  ...
};

具体来说，您可以使用 annotations.textStyle.fontSize 的组合和 annotations.stem.length防止重叠

请参阅以下工作片段...
annotations.textStyle.fontSize整个图表都减少了
这允许第二列上的第一个注释适合栏
annotations.stem.length在第一个系列上设置为零( 0 )，
和 16在第二...

(问题中的额外注释已被删除) 

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

function drawStacked() {
  var data = new google.visualization.arrayToDataTable([
    ['Time Period', 'XYZ', {role: 'annotation'}, 'ABC', {role: 'annotation'}, 'Average'],
    ['Aug', 3754, '3754', 2089, '2089', 4000],
    ['Sept', 900, '900', 200, '200', 4000],
    ['Oct', 2000, '2000', 4900, '4900', 4000],
    ['Nov', 1700, '1700', 2200, '2200', 4000],
    ['Dec', 2400, '2400', 2089, '2200', 4000]
  ]);

  var options = {
    annotations: {
      textStyle: {
        fontSize: 10
      }
    },
    series: {
      0: {
        annotations: {
          stem: {
            length: 0
          },
        },
      },
      1: {
        annotations: {
          stem: {
            length: 16
          }
        },
      },
      2: {
        type: 'line'
      }
    },
    hAxis: {
      title: 'Time Period'
    },
    isStacked: true,
    seriesType: 'bars',
    title: 'Overview of the Tickets',
    vAxis: {
      title: 'Number of Tickets'
    }
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>


编辑

由于需要第三个注释作为其他两个堆栈的总和，
除了注释列之外，建议添加总计的系列值

并将总系列类型设置为 'line'这肯定会将总注释置于其余注释之上
只要图表上有足够的空间来显示条形上方的注释

为确保条形上方有足够的空间，找到最大 vAxis 值，并添加一个值，以便为注释创造足够的空间
然后将该值设置为 vAxis.viewWindow.max
如果需要，您可以关闭线和点，并从图例中隐藏总系列

根据我的经验，需要相当多的操作才能让复杂的谷歌图表很好地显示出来

请参阅以下工作片段，其中包含第三个“总计”注释... 

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

function drawStacked() {
  var data = new google.visualization.arrayToDataTable([
    ['Time Period', 'XYZ', {role: 'annotation'}, 'ABC', {role: 'annotation'}, 'TOTAL', {role: 'annotation'}, 'Average'],
    ['Aug', 3754, '3,754', 2089, '2,089', 5843, '5,843', 4000],
    ['Sept', 900, '900', 200, '200', 1100, '1,100',  4000],
    ['Oct', 2000, '2,000', 4900, '4,900', 6900, '6,900',  4000],
    ['Nov', 1700, '1,700', 2200, '2,200', 3900, '3,900',  4000],
    ['Dec', 2400, '2,400', 2089, '2,089', 4489, '4,489',  4000]
  ]);

  // find max for all columns to set top vAxis number
  var maxVaxis = 0;
  for (var i = 1; i < data.getNumberOfColumns(); i++) {
    if (data.getColumnType(i) === 'number') {
      maxVaxis = Math.max(maxVaxis, data.getColumnRange(i).max);
    }
  }

  var options = {
    annotations: {
      textStyle: {
        fontSize: 10
      }
    },
    series: {
      0: {
        annotations: {
          stem: {
            length: 0
          },
        }
      },
      1: {
        annotations: {
          stem: {
            length: 2
          }
        }
      },
      2: {
        annotations: {
          stem: {
            color: 'transparent',
            length: 16
          }
        },
        color: 'black',
        lineWidth: 0,
        pointShape: 'square',
        pointSize: 0,
        type: 'line',
        visibleInLegend: false
      },
      3: {
        type: 'line'
      }
    },
    hAxis: {
      title: 'Time Period'
    },
    isStacked: true,
    seriesType: 'bars',
    title: 'Overview of the Tickets',
    vAxis: {
      title: 'Number of Tickets',
      viewWindow: {
        max: maxVaxis + 2000
      }
    }
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

关于google-visualization - 如何避免在 Google 条形图中的 Bar 上重叠标签？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39771018/

25 4 0
文章推荐： amazon-web-services - 有没有办法使用 cloudformation 或 AWS CLI 创建 AWS 仪表板
文章推荐： c++ - 如何在 C++ 中使用 X11 知道按键？
文章推荐： ubuntu - 如何重新启动 buildkite 代理
文章推荐： azure-functions - 如何在 Azure 逻辑应用程序中逐行读取 CSV 文件？