如何移动图表中的标签，使它们出现在条形图中条形图的底部？
How to shift labels in graph so that they appear on bottom of bars in bar graph?
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":[
{
规则：“%v<0”，
放置:"out",
文字：“%v%”，
偏移量：“-25px”，
},
{
规则：“%v>0”，
放置:"out",
文字：“%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>
},
},
"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>