javascript - 如何移动图表中的标签，使它们出现在条形图中条形图的底部？

Question

var chartByProduct = { “类型”:“hbar”， “标题”: { "text": "顶部和底部 5 个产品按 CM", “文本对齐”:“居中”， "font-family":"宋体", “字体颜色”:“#5b5b5b”， “字体大小”:“18px”， “填充”:“25px”， “背景色”:“无” }, “阴谋”: { “值框”:{ “小数”:2， “规则”:[ { 规则:“%v<0”， 放置:“出”， 文字:“%v%”， 偏移量:“-25px”， }, { 规则:“%v>0”， 放置:“出”， 文字:“%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 很重要。

另一种选择是使用 labels并计算每个条的高度，并使用 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>