javascript – 如何在图表中移动标签,使它们出现在条形图中条形图的底部?

Image of bar chart(Can not be displayed) var chartByProduct = {
                        “类型”:“HBAR”
                        “title”:{
                                “文字”:“CM的TOP& BOTTOM 5产品”,
                                “text-align”:“center”,
                                “FONT-FAMILY”: “宋体”,
                                “font-color”:“#5b5b5b”,
                                “font-size”:“18px”,
                                “填充”:“25px”,
                                “background-color”:“none”
                                },
                                “情节”:{
                                    “valueBox”:{
                                       “小数”:2,
                                       “规则”:
                                           {
                                            规则:“%V℃,”,
                                            位置:“出来”,
                                            文字: “%V%”,
                                            OFFSETX: “ – 25像素”,
                                           },
                                           {
                                            规则: “%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个不同的图表?
请帮忙.

最佳答案
完全披露,我是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>

转载注明原文:javascript – 如何在图表中移动标签,使它们出现在条形图中条形图的底部? - 代码日志