程序员经验分享-hwhale

如何避免谷歌条形图中的条形标签重叠？

2024-01-10

我正在创建一个堆积条形图，需要显示堆栈内的标签。但很少有标签被重叠。以供参考image https://i.stack.imgur.com/gGKG9.jpg

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

<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 配置选项 https://developers.google.com/chart/interactive/docs/gallery/combochart#configuration-options用于调整

配置选项可用于整个图表，或仅用于特定系列

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 and annotations.stem.length以防止重叠

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

annotations.textStyle.fontSize整个图表减少了
这允许第二列上的第一个注释适合该条

annotations.stem.length被设置为零（0）在第一个系列中，
and 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>

EDIT

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

并将总系列类型设置为'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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

googlevisualization

barchart

如何避免谷歌条形图中的条形标签重叠？ 的相关文章

  • matplotlib xtick 标签未对齐

    我创建了一个非常简单的堆积条形图 但由于某种原因 我的 x tick 标签偏离了中心 我尝试使用一些tick label set 属性来排列它们是没有用的 有什么建议么 谢谢 Code bottom np vstack np zeros d

  • 导出谷歌图表？

    我编写此代码是为了创建图表 表格和工具栏 google load visualization 1 packages corechart google load visualization 1 packages table google se

  • 以编程方式格式化谷歌图表

    使用以下代码如何设置格式以便CurrencyValue1和CurrencyValue2在图表中显示为美元 作为货币值 function drawChart var data new google visualization DataTabl

  • 将 .hide() 和 .show() 与 Google Visualization 结合使用

    我用谷歌可视化创建了一个折线图 我已经测试过它并且它按预期工作 问题是 当我在可视化上使用 hide 启动页面 然后单击按钮显示它时 它不会显示可视化 这是我所拥有的内容的精简版本

  • 如何在另一个div中克隆和重新绘制谷歌图表？

    我很难弄清楚如何做到这一点 因为我对谷歌图表不太熟悉 我正在使用pivotTable js 一切正常 但我想 保存 或有一个按钮 将当前创建的图表克隆到另一个div 我做了一个全局变量 var wrapper 这是为了保存图表 wrappe

  • 即时刷新 Google 可视化

    我目前正在通过谷歌可视化创建谷歌图表 我希望能够通过单击按钮刷新 更新此图表 我尝试了很多不同的方法来做到这一点 但没有一个有效 所以我正在寻找任何人都可以提出的建议 我当前的平台是 ASP net 使用 C 而 google 的东西是用

  • 带有垂直 ytick 标签的条形图

    我正在使用 matplotlib 生成 垂直 条形图 问题是我的标签相当长 有什么方法可以垂直显示它们 无论是在栏中还是在其上方或下方 你的意思是这样的吗 gt gt gt from matplotlib import gt gt gt p

  • Google 可视化 - 第 0 行的行类型无效

    我必须使用谷歌可视化在饼图上可视化 url json 数据 我的代码似乎是为了达到目的而必须的 但我在控制台中收到 第 0 行无效的行类型 错误 数据格式有问题吗 如果有人可以提供帮助 我们将不胜感激 这是我的代码 PHP

  • 如何在 Google Charts 中获取带有 svg 内图像的 png(base64)？

    如何获取 svg 内图像的 base64 检查这个Fiddle http jsfiddle net R8A8P 51 这是我从另一个问题中得到的 如果您看到第二个图形 则它不会生成覆盖该条的图像 var chart new google v

  • 谷歌图表增加y轴宽度增加

    如何增加 Google 图表 y 轴宽度 请找到图片 左侧全文未正确显示 请指导我 如何增加谷歌图表y轴宽度 https i stack imgur com jl1L2 jpg 需要调整图表和chartArea中的大小options 要为左

  • 从 Google Visualization 的 ColumnChart 中手动选择一个栏

    我使用 Google Visualization 的 ColumnChart 制作了一个图表 如下所示 它基本上是一个使用 3 x 7 矩阵的堆积柱形图 在每个栏中 我删除了另外两行的数据 我的问题是如何使黄色条 或其他条 看起来像是从一开

  • 如何更改 Angular-Chart.js 的颜色

    我使用 Angular Chart js AngularJSChart js http www chartjs org 版本 来创建条形图 图表正在使用除颜色之外的选项 即使我设置了它们 它也会显示在文档中 http jtblin gith

  • Google Geocharts：同一地图上的区域和标记？

    我正在尝试使用谷歌地理图表 https google developers appspot com chart interactive docs gallery geochart 我有州数据和城市数据 我想在城市数据上显示它们 这意味着我想

  • Google Charts：折线图和柱形图之间的切换

    我有一个仪表板 其中包含一些 Google Analytics 指标 我想在每日 每月和每周图表上绘制这些指标 日线图为折线图 其他为柱形图 我能够将图表最初绘制为折线图或条形图 然后将其重新绘制为不同类型 但之后它不会再次重新绘制 这是我

  • 想要在谷歌饼图图例中显示百分比数据

    I am using google charts API specifically pie chart in my code i want to show percentage which is displayed inside chart

  • 重新格式化双向条形图以匹配示例

    我生成了这个条形图 使用此代码 s level margins fluid margins vp Volume 0 0 1L 0 718 0 690 2L 0 501 0 808 5L 0 181 0 920 MAP 0 0 64 0 43

  • 谷歌折线图：如何添加单位？

    https google developers appspot com chart interactive docs gallery linechart Example https google developers appspot com

  • 如何将散景 vbar 图表参数与 groupby 对象一起使用？

    Question 下面的代码是来自 bokeh 文档的分组 vbar 图表示例 这个例子中有一些我无法理解的地方 Factor cmap 和 vbar 中的 cyl mfr 来自哪里 mpg mean 是否计算 mpg 列的平均值 如果那么

  • R 编程：创建堆叠条形图，每个堆叠条形具有可变颜色

    我正在尝试创建一个堆叠条形图 每个堆叠条形图中的颜色可变 也就是说 一个条形图在红色上方显示蓝色 下一个条形图在紫色上方显示红色 等等 我还想保留堆叠图表的功能 十分感谢大家 Adam 下图 使用上面的代码创建 显示了主要汽车制造商生产的汽

  • TypeError: 使用 ajax 时 google.load 不是一个函数

    我正在使用 Google 图表 termcloud 来显示一些数据 我可以让它作为页面上的静态功能正常工作 但是当我尝试通过 ajax 加载图表及其资产时 它似乎一直抛出错误 TypeError google load is not a f

随机推荐

热门标签