问题标签 [ng2-google-chart]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
32 浏览

javascript - 我们如何创建由多列和负数堆叠的谷歌图表?

我正在尝试创建一个包含多列和负数的谷歌图表。

数据:

如果我们将数据替换为http://jsfiddle.net/p7o0pjgg/ 并删除以下代码,但左右 y 轴未正确水平为 0。

是否可以对齐左右y轴?

视窗:{ 最小值:0,最大值:1000 }

0 投票
0 回答
31 浏览

angular - 谷歌图表注释标签

我正在使用以下方法根据要求将注释标签从实际位置移动到底部位置。当我将鼠标悬停时加载谷歌图表后,注释标签从图表的底部移动到中心。请帮我解决这个问题。

[![https://i.stack.imgur.com/oiaYf.png][1]][1]

0 投票
0 回答
15 浏览

angular - 谷歌图表水平线显示在栏的前面,当我悬停图例时显示小线。请帮我

谷歌图表水平线显示在栏的前面,当我悬停图例时显示小线。请帮我。请参阅下面的代码和附加的屏幕截图。 protected getChartOptions() { return { annotations: { style: 'line', stem: { color: 'transparent', length: 0 }, textStyle: { fontSize: 11, color:'#838383', auraColor: 'transparent' }, }, tooltip: { textStyle: { fontSize: 12, bold: true, } }, height: 280, fontName : "Lato", colors: ["#F40C48", "#16B587", "#EAB417", "#F47A0C", "#838383"], legend: { position: "top", maxLines: 3, textStyle: { color: "#0b5b90", fontSize: 10 } }, bar: { groupWidth: "20%" }, hAxis: { textPosition: 'none', }, vAxis: { textStyle: { fontSize:8, bold: true, }, gridlines: { count: 3, color: "#E8E8E8" }, }, series: { 0: { targetAxisIndex: 0 }, 1: { targetAxisIndex: 1 } }, vAxes: { 0: { textPosition: 'none',baselineColor: '#E8E8E8'}, 1: { baselineColor: '#929292'} }, isStacked: "percent", chartArea: { width: "80%"} } } 谷歌图表图片在这里

0 投票
0 回答
49 浏览

angular - Angular:调用draw方法后Google Charts TreeMap不刷新

我正在尝试在数据更改后在 UI 中显示更新后的 Tree Map,但即使在调用 draw 方法后 Tree Map 似乎也没有使用最新信息进行更新。

以下是我每次在数据更改后调用的 drawChart 方法。

谷歌图表加载 AfterViewInit:

声明的属性:

html:

登陆页面上的树形图: 在此处输入图像描述

更改数据后的TreeMap: 在此处输入图像描述

Github 代码链接

0 投票
0 回答
19 浏览

javascript - 如何在不同的轴目标中更改特定系列的条形宽度 - Angular 谷歌图表

我正在使用 Angular 谷歌图表上的 ComboChart 开发分层柱形图。虽然我已经在两个不同的轴上分离了两个系列的条形图,能够在另一个前面找到一个条形图,就像需要的那样,我不能只改变一个系列的宽度。我想要像 amCharts 分层柱形图这样的结果:

分层柱形图示例

现在,图表看起来像:

当前图表 - Angular 谷歌图表

此外,如果有一种方法可以共享相同的 y 轴,同时保持一个条在另一个条之前,而不是 staking,那就太好了。

我一直用于角度谷歌图表选项的代码:

图表正确显示数据,唯一的问题是布局。

一些可能有帮助的参考:

Google Developers - 可视化:组合图 amCharts 分层柱形图 重叠条 - 堆栈溢出报价- 这里的结果是堆积条形图(我不想要的东西)

0 投票
1 回答
31 浏览

javascript - 在 Angular 12 webapp 上,Google Charts 组件在组件销毁后也会使 webapp 变得非常慢

我在我的 Angular 12 web 应用程序中完美地集成了 Google 图表,但是显示 google 图表的组件使 web 应用程序在渲染图形动画和动作时非常慢。如果我隐藏了谷歌图表组件,webapp 恢复的速度非常快(在不同的组件中拖放,在谷歌图表组件被破坏后,恢复非常快和流畅)。我尝试了 ngOnDestroy() {// some google destroy} 方法,但没有任何效果。我能做些什么?