【发布时间】:2025-12-19 04:55:11
【问题描述】:
是否可以制作一个“假”堆叠条形图,其中 0 值被向上推,即向上 10px,所以 0 值将有一个 10px 条形,所以用户总是有东西可以点击?
【问题讨论】:
标签: javascript amcharts
是否可以制作一个“假”堆叠条形图,其中 0 值被向上推,即向上 10px,所以 0 值将有一个 10px 条形,所以用户总是有东西可以点击?
【问题讨论】:
标签: javascript amcharts
没有允许您执行此操作的属性,但是您有一些解决方法。
您可以通过设置angle 和depth3D 属性来制作3D 图表。这为在轴级别上单击的零尺寸条提供了更多表面积。不过,这不适用于堆叠图表。
或者,您可以在列中添加不可见的项目符号。您可以在图表中指定 bullet 形状,然后将 bulletAlpha 设置为 0,以便它们不可见,但仍可单击。您还可以通过将bulletSize 设置为更大的数字来增加大小,这会增加命中框:
"graphs": [{
"fillAlphas": 0.9,
"bullet": "round",
"bulletSize": 20, //used to increase the hitbox
"bulletAlpha": 0,
"type": "column",
"valueField": "visits"
},
// ...
]
我创建了一个带有不可见项目符号和可见项目符号的演示来说明命中框和位置here。我将bulletSize 设置为 20 以使其足够大以覆盖气球出现的部分区域,以便用户可以单击此处的圆形
作为最后的替代方法,您可以创建一个不可见的非聚类图,该图指向与数据中的最大值相对应的 valueField。这个不可见的列将包含每个类别上方的空间,直到 valueField 中的值,因此列上方的任何空白空间也会触发点击事件。
"dataProvider": [{
"country": "Netherlands",
"visits": 665,
"max": 665
}, {
"country": "Russia",
"visits": 0,
"max": 665
},
// ...
],
"graphs": [{
// invisible graph - set clustered to false and all other visible properties and interactive properties to 0 or false
"clustered": false,
"visibleInLegend": false,
"fillAlphas": 0,
"lineAlpha": 0,
"showBalloon": false,
"type": "column",
"valueField": "max"
}, {
// real graph
"fillAlphas": 0.9,
"type": "column",
"valueField": "visits"
}],
这是这个方法的demo。
【讨论】: