如何在图表中移动标签，使其显示在条形图中条形图的底部？
var chartByProduct = {
＆＃34;类型＆＃34;：＆＃34; HBAR＆＃34 ;,
＆＃34; title＆＃34;：{
＆＃34;文字＆＃34;：＆＃34; TOP＆amp; CM＆＃34;的底部5个产品，
＆＃34; text-align＆＃34;：＆＃34; center＆＃34;，
＆＃34;字体家庭＆＃34;：＆＃34; Arial字体＆＃34 ;,
＆＃34; font-color＆＃34;：＆＃34;＃5b5b5b＆＃34;，
＆＃34; font-size＆＃34;：＆＃34; 18px＆＃34;，
＆＃34;填充＆＃34;：＆＃34; 25px＆＃34;，
＆＃34; background-color＆＃34;：＆＃34; none＆＃34;
}，
＆＃34; plot＆＃34;：{
＆＃34; valueBox＆＃34;：{
＆＃34;小数＆＃34;：2，
＆＃34;规则＆＃34;：[
{
规则：＆＃34;％V＆℃，＃34 ;,
放置：＆＃34;列＆＃34 ;,
文本：＆＃34;％v％的＆＃34 ;,
OFFSETX：＆＃34; -25px＆＃34 ;,
}，
{
规则：＆＃34;％体积大于0＆＃34 ;,
放置：＆＃34;列＆＃34 ;,
文本：＆＃34;％v％的＆＃34 ;,
offsetX：＆＃34; 25px＆＃34;
}，
]
},
},
"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个不同的图表？ 请帮忙。
1 个答案:
答案 0 :(得分：4)
完全披露，我是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>
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？