问题描述
我使用 Zingchart 的条形图来显示大量值（从数百到数百万：431、7932、9874、1003000）。如果 value 大于 1000，我想以缩短的格式显示 valueBox 的文本：431、7K、9K、1M，但希望工具提示显示真正的完整值。
为此，我尝试使用“规则”，但我无法在“文本”属性中进行数学运算。表达方式：
{ ‘rule': '"%v" > 1000','text': '%v/1000' + 'K' }
变成
9874/1000K，而我需要它变成 9K。
有没有办法让valueBox的文本以缩短格式显示，而tooltips的文本保持完整格式？
下面是我的条形图。
const zingchartsBar0 = {
'type': 'hbar','plot': {
'border-radius': "0 10px 10px 0",'valueBox': {
'text': '%v','color' : '#000','rules': [{
'rule': '"%t" == "Step 4"','color' : 'green','fontWeight':'bold',},{
'rule': '"%v" > 1000','text': '%v/1000' + 'K'
},{
'rule': '"%v" > 1000000','text': '%v/1000000' + 'M'
}
],}
},'scale-y': {
'short': true,'short-unit': "K",'scale-x': {
},'legend': {
'layout': '2x2','align': 'left','padding': '0','background-color': 'transparent','border-width': 0,'border-color': 'transparent','border-radius': 0,'toggleAction': 'remove','marker': {
'type': "circle"
},'series': [
{
'values': [1003000],'text': 'Step 1'
},{
'values': [9874],'text': 'Step 2'
},{
'values': [7932],'text': 'Step 3'
},{
'values': [431],'text': 'Step 4'
}
]
}
zingchart.render({
id: 'zingchart-bar-0',width: '100%',height: '400',data: zingchartsBar0,});<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div class="zingchart-bar" id="zingchart-bar-0"></div>
</body>
</html>解决方法
ZingChart 内置了 short units。如果您有更多问题，获得帮助的最快方式是通过在我们的网站上开始聊天或发送电子邮件至 support@zingchart.com 与我们的支持团队联系。