如何在圖表中移動標簽，使它們出現在條形圖中條形圖的底部？

Question

var chartByProduct = {“type”：“hbar”，“title”：{“text”：“TOP＆BOTTOM 5 PRODUCTS by CM”，“text-align”：“center”，“font-family”：“arial” ，“font-color”：“＃5b5b5b”，“font-size”：“18px”，“padding”：“25px”，“background-color”：“none”}，“plot”：{“valueBox”： {“decimals”：2，“rules”：[{rule：“％v <0”，placement：“out”，text：“％v％”，offsetX：“ - 25px”，}，{rule：“％ v> 0“，placement：”out“，text：”％v％“，offsetX：”25px“}，]

                                  },
                            },
                    "plotarea":{
                        "adjustLayout":true,
                        "marginLeft":"30%",
                        "marginRight":"30%",
                        "marginBottom":"15%",
                        "marginTop": "15%",
                    },
                    "scale-x":{
                        "offset-end":"50%",
                        "offset-x":"50%",
                        alpha:1,
                        tick:{alpha:0},
                        "label":{
                            "text":"Bottom 5 products by sales"
                            },
                        "labels":[negative_product_name[0],negative_product_name[1],negative_product_name[2],negative_product_name[3],negative_product_name[4]],
                    },
                    "scale-x-2":{
                        "offset-start":"50%",
                        alpha:0,
                        tick:{alpha:0},
                        "label":{
                            "text":"Top 5 products by sales"
                            },
                        "labels":[positive_product_name[0],positive_product_name[1],positive_product_name[2],positive_product_name[3],positive_product_name[4]],
                    },
                    "scale-y":{
                        "alpha":1.0,
                        },
                    "scale-y-2":{
                        "alpha":1.0,
                        },
                    "series":[
                           {
                            "values":negative_cm_excluding_no_ev_percent,
                            "decimals":2,
                            "scales":"scale-x,scale-y",
                            "data-custom-token" : negative_cm_excluding_no_ev,
                            "tooltip":{
                                "text":'%data-custom-token',
                                },
                            "rules":[
                                  { 
                                   rule:"%v<0",
                                   "background-color":"#fd625e"
                                   },
                                   {
                                    rule:"%v>0",
                                    "background-color":"#68d7c6"
                                   },
                                ],
                        },
                        {
                            "values":positive_cm_excluding_no_ev_percent,
                            "decimals":2,
                            "scales":"scale-x-2,scale-y",
                            "data-custom-token" : positive_cm_excluding_no_ev,
                            "tooltip":{
                                "text":'%data-custom-token',
                                },
                            "rules":[
                                  { 
                                    rule:"%v<0",
                                    "background-color":"#fd625e"
                                   },
                                   {
                                     rule:"%v>0",
                                     "background-color":"#68d7c6"
                                   },
                                    ],
                        },
                    ]
        };
zingchart.render({
    id: 'productBarChart',
    data: chartByProduct,
    hideprogresslogo: true,
    height: "100%",
    width: "100%"
});

這里配置中的標簽位於條形圖上方，因為我希望它們下面有這些標簽。 我怎么能這樣做？ 我可以用什么屬性來移動圖表的標尺。 我可以在此配置中進行更改，還是應該使用混合圖表或2個不同的圖表？ 請幫忙。

Answer 1

完全披露，我是ZingChart團隊的成員。

 var myConfig = { "type":"hbar", "title":{ "text":"TOP & BOTTOM 5 PRODUCTS BY CM", "text-align":"center", "font-family":"arial", "font-color":"#5b5b5b", "font-size":"18px", "padding":"25px", "background-color":"none", "adjustLayout":true }, "plotarea":{ "adjustLayout":true, "margin":'dynamic' }, "plot":{ "valueBox":{ "fontColor":"#000" }, "stacked":true }, "scale-x":{ "offset-end":"55%", "offset-x":"50%", "alpha":1, "tick":{ "alpha":0 }, "label":{ "text":"Bottom 5 products by sales" } }, "scale-x-2":{ "offset-start":"55%", "alpha":0, "tick":{ "alpha":0 }, "label":{ "text":"Top 5 products by sales" }, }, "scale-y":{ }, "scale-y-2":{ }, "series":[ { "values":[-5,-4,-6,-7,-1], "decimals":2, "stack":1, "scales":"scale-x,scale-y", 'data-custom-token': ['Videocon 1.5 Ton Star Split', 'Samsung Galaxy s6 Edge','Voltas 155CY 1.2 Ton 5 Star Air SPlit Conditioner','Google Nexus', 'Gitanjali 100 Gm 24Kt 995 Bis Hallmarked Purity Plain Gold Bar'], "valueBox":{ "text":'%data-custom-token', "placement":'bottom' }, "background-color":"#fd625e" }, { "values":[0,0,0,0,0], "decimals":2, stack:1, "scales":"scale-x,scale-y", 'data-custom-token':[-5,-4,-6,-7,-1], "valueBox":{ "text":'%data-custom-token', "placement":'bottom', }, "background-color":"#fd625e" }, { "values":[0,0,0,0,0], "decimals":2, "stack":2, 'data-custom-token':[5,4,6,7,1], "scales":"scale-x-2,scale-y", "valueBox":{ "text":'%data-custom-token', "placement":'bottom-in' }, "background-color":"#68d7c6" }, { "values":[5,4,6,7,1], "decimals":2, "stack":2, "scales":"scale-x-2,scale-y", 'data-custom-token':['Insect And Mosquito Killer with NIght Lamp','Lenovo K3 Note 16GB', 'LED Projection Clock', 'Nokia 225 (black)', 'Nokia 225'], "valueBox":{ "text":'%data-custom-token', "placement":'bottom-out' }, "background-color":"#68d7c6" }, ] }; zingchart.render({ id : 'myChart', data : myConfig, height: 500, width: '99%' }); 

 <!DOCTYPE html> <html> <head> <!--Assets will be injected here on compile. Use the assets button above--> <script src= 'https://cdn.zingchart.com/2.4.0/zingchart.min.js'></script> <script> ZC.MODULESDIR = 'https://cdn.zingchart.com/2.4.0/modules/'; </script> <!--Inject End--> </head> <body> <div id='myChart'></div> </body> </html> 

這背后的想法是創造另一個系列。 堆疊那個系列並在那里顯示另一個valueBox。 該系列的排序對於堆疊和顯示valueBox很重要。

另一種方法是使用標簽並計算每個條的高度，並使用offsetX將標簽放在條的末端。 這涉及直接SVG操作，但它很有可能。

 var labelName = ['Apple','Microsoft','Samsung', 'Sony', 'LG', 'Motorola', 'Nokia', 'HTC']; function createLabel(text, nodeWidth, yh) { var clientWidth = document.getElementById('myChart').clientWidth; var labelWidth = nodeWidth ? clientWidth - nodeWidth : clientWidth; return { "text": text, "font-size": "18px", "font-family": "arial", "font-weight": "normal", "font-color": "#000000", "textAlign":"left", "borderBottom" : "3px dotted black", "border-spacing": 5, "width" : labelWidth, "x":0, "y": 25 + yh, // Fixed height, will adjust offsetBased on Height "shadow": false } } var myConfig = { type: "hbar", scaleY: { mirrored: true, values:"0:150:10", //scale the bars down visible:false }, scaleX: { visible:false }, plotarea: { margin:0, padding:0 }, series : [ { valueBox: { text: "%pper", decimals: 3, fontSize: "18px", fontColor: "#FFFFFF", placement: "node: top", paddingLeft: "75px" }, values : [35,42,67,89,25,34,67,85], backgroundColor : "#4CB8C4 #3CD3AD", // Cannont have borderRadius with it, } ] }; zingchart.load = function(p) { // Data to update the chart var json = {}; json.labels = []; var padding = 20; // Get the plot container from svg var plotPath = document.getElementById("myChart-graph-id0-plot-0-bl-1-c"); // Get the svg plots from the container var plots = plotPath.getElementsByTagName("path"); // Loop through and create labels for(var i = 0; i < plots.length; i++) { // Get the path attribute from d matching this. Minimal amount of info to get x1 x2 and y1 var xyCords = plots[i].getAttribute("d").match(/M{1} [0-9]{1,4} [0-9]{1,4} L [0-9]{1,4}/) // Split after the M, grab the first numbers encountered, grab that value var x1 = xyCords[0].split('M ')[1].match(/[0-9]{1,4}/)[0]; // Get y cordinate for position line up and down var y1 = xyCords[0].split('M ')[1].match(/[0-9]{1,4} [0-9]{1,4}/)[0].split(' ')[1]; // Split after the L, grab the first numbers and we have our starting point var x2 = xyCords[0].split('L ')[1]; // Create new labels // padding is offset for border size and labe fontSize json.labels.push(createLabel(labelName[i], (x2-x1 + padding), parseInt(y1) - padding)); } // Update the chart to the new labels zingchart.exec('myChart', 'modify', { graphid: 0, plotid: 0, data: json }); } zingchart.render({ id : 'myChart', data : myConfig, height: "100%", width: "100%", //Meant for 100% width charts }); 

 <!DOCTYPE html> <html> <head> <script src= "https://cdn.zingchart.com/zingchart.min.js"></script> <script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/"; ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9","ee6b7db5b51705a13dc2339db3edaf6d"];</script></head> <body> <div id='myChart'></div> </body> </html>