html - Zing 图表堆积图

Question

我正在使用 Zing Chart 堆叠条形图。我正在从 Oracle 数据库加载数据来填充图表。我有两个堆栈:打开和关闭。我想在堆栈顶部显示打开文档到关闭文档的数量，如打开:关闭(例如 5:303)。我能够在单个堆栈的顶部打印数字(封闭栏顶部 5，开放栏顶部 303)但我想在最顶部显示它们，因为如果有 1 个打开和 0 个关闭，数字相互重叠，无法读取。因此，我一直在查看 Zing Charts 提供的所有 JSON 标记，但我一直无法找到一种方法来获取每个数字(值)并将它们一起显示。

Answer 1

您可以通过图和节点索引访问节点值。例如，(%node-value)(0)(4) 将为您提供第一个图上第 5 个节点的值。

由于堆叠条形图在技术上是 2 个图，您可以在第二个(打开的)图中使用以下标记:

"text":"%node-value:(%node-value)(0)"

下面是一个实际示例 - 运行代码段以查看图表。

var myConfig = {
"graphset":[
    {
        "legend":{
            "margin-top":50,
            "background-color":"#FFFFFF",
            "border-color":"#CCCCCC",
            "shadow":false,
            "margin-right":10,
            "alpha":1
        },
        "border-color":"#cccccc",
        "series":[
            {
                "text":"Closed",
                "shadow-color":"#cccccc",
                "shadow-blur-y":1,
                "line-color":"#008000",
                "background-color":"#008000",
                "type":"bar",
                "values":[0,0,1,1,3,3,3,3,4,4],
                "shadow-alpha":1,
                "marker":{
                    "background-color-2":"#008000",
                    "background-color":"#008000"
                },
                "shadow":true,
                "background-color-2":"#008000",
                "shadow-distance":2,
                "shadow-blur-x":2
            },
            {
                "text":"Open",
                "shadow-color":"#cccccc",
                "shadow-blur-y":1,
                "line-color":"Orange",
                "background-color":"Orange",
                "type":"bar",
                "values":[3,6,8,8,83,94,96,102,297,303],
                "shadow-alpha":1,
                "marker":{
                    "background-color-2":"Orange",
                    "background-color":"Orange"
                },
                "shadow":true,
                "background-color-2":"Orange",
                "shadow-distance":2,
                "shadow-blur-x":2,
                "value-box":{
                    "font-size":14,
                    "font-color":"black",
                    "bold":true,
                    "font-family":"Consolas",
                    "placement":"top",
                    "type":"all",
                    "text":"%node-value:(%node-value)(0)"
                }
            }
        ],
        "scale-y":{
            "line-gap-size":0,
            "tick":{
                "line-gap-size":0,
                "line-color":"#cccccc",
                "line-width":1,
                "size":10
            },
            "line-color":"#cccccc",
            "bold":true,
            "item":{
                "font-size":12,
                "bold":true,
                "font-family":"Consolas",
                "color":"#333333"
            },
            "label":{
                "font-size":16,
                "margin-left":10,
                "text":"Count",
                "color":"#333333"
            },
            "line-width":2,
            "font-family":"Consolas",
            "color":"#333333"
        },
        "plotarea":{
            "margin-top":50,
            "margin-left":70,
            "margin-right":100,
            "margin-bottom":80
        },
        "scale-x":{
            "line-gap-size":0,
            "tick":{
                "line-gap-size":0,
                "line-color":"#999999",
                "line-width":1,
                "size":20
            },
            "font-size":8,
            "line-color":"#cccccc",
            "bold":true,
            "guide":{
                "line-width":1
            },
            "item":{
                "font-size":12,
                "bold":true,
                "font-family":"Consolas",
                "color":"#333333"
            },
            "label":{
                "padding-top":100,
                "font-size":16,
                "text":"Month",
                "color":"#333333"
            },
            "line-width":1,
            "font-family":"Consolas",
            "color":"#333333",
            "values":["Feb 2015","Mar 2015","Apr 2015","May 2015","Jun 2015","Jul 2015","Aug 2015","Sep 2015","Oct 2015","Nov 2015"]
        },
        "background-color":"WhiteSmoke",
        "border-width":1,
        "stacked":true,
        "lens":{
            "visible":true,
            "height":60,
            "width":60
        },
        "plot":{
            
        },
        "type":"bar",
        "title":{
            "background-color":"white",
            "border-color":"#cccccc",
            "border-width":1,
            "font-size":18,
            "bold":true,
            "text":"L2PRO-TRAVs (Updated: 17 Nov 2015, 13:08)",
            "font-family":"Consolas",
            "color":"#333333"
        }
    }
]
};
 
zingchart.render({ 
	id : 'myChart', 
	data : myConfig, 
	height: 400, 
	width: 600 
});

<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<div id="myChart"></div>