Question

我在下面的条形图中跟随json：

    {
"graphset":[
    {
        "type":"bar3d",
        "series":[
            {
                "values":[10323,2023,41346.8,29364.6],
                "tooltip":{
                    "text":"₹%v"
                }
            }
        ],
        "3d-aspect":{
            "true3d":0,
            "y-angle":10,
            "depth":30
        },
        "legend":{
            "visible":false
        },
        "scale-y":{
            "format":"₹%v",
            "bold":true,
            "label":{
                "text":"Amount",
                "font-size":"14px"
            }
        },
        "scale-x":{
            "values":["Vegetables & Fruits","Groceries","Dairy & Beverages","Meat"],
            "short":true,
            "auto-fit":true,
            "items-overlap":true,
            "bold":true,
            "label":{
                "text":"Category",
                "font-size":"14px"
            }
        },
        "plotarea":{
            "margin":"dynamic"
        },
        "gui":{
            "context-menu":{
                "empty":false
            }
        },
        "plot":{
            "background-color":"red",
            "border-color":"#BBBBBB",
            "bar-width":"30px",
            "bar-space":"20px"
        },
        "no-data":{
            "text":"No analytics data available",
            "bold":true,
            "font-size":18
        }
    }
]
}

条形图的屏幕截图是：

如图所示，x轴标签相互重叠。我希望每个标签清晰明确地显示出来。如果名称很大，可以移动到下一行吗？我有固定的空间分配，所以我不能增加每个栏之间的宽度，我不想使用max-chars属性，因为我想显示全名。另外，我无法使用font-angle来设置另一个角度的名称 - 我只希望它们在这个角度。

任何帮助表示感谢。

Answer 1

适当的方法

最佳方法是使用max-chars缩写或显示截断values，然后在显示整个值的标签上显示tooltip。
使用带角度的文本也非常合理。

Other solution

最好应用规则并在不同的行高显示每隔一个scaleX.item。您可以使用规则

"scale-x":{
  "labels":["Vegetables & Fruits","Groceries","Dairy & Beverages","Meat"],
  "items-overlap":true,
  "bold":true,
  "label":{
      "text":"Category",
      "font-size":"14px",
      offsetY: 5
  },
  item: {
    rules: [
      {
        rule: '%i%2 == 1',
        offsetY:13
      }  
    ]
  }
}

＆＃13;

var myConfig = {
        "type":"bar3d",
        "series":[
            {
                "values":[10323,2023,41346.8,29364.6],
                "tooltip":{
                    "text":"₹%v"
                }
            }
        ],
        "3d-aspect":{
            "true3d":0,
            "y-angle":10,
            "depth":30
        },
        "legend":{
            "visible":false
        },
        "scale-y":{
            "format":"₹%v",
            "bold":true,
            "label":{
                "text":"Amount",
                "font-size":"14px"
            }
        },
"scale-x":{
      "labels":["Vegetables & Fruits","Groceries","Dairy & Beverages","Meat"],
      "items-overlap":true,
      "bold":true,
      "label":{
          "text":"Category",
          "font-size":"14px",
          offsetY: 5
      },
      item: {
        rules: [
          {
            rule: '%i%2 == 1',
            offsetY:13
          }  
        ]
      }
  },
        "plotarea":{
            "margin":"dynamic"
        },
        "gui":{
            "context-menu":{
                "empty":false
            }
        },
        "plot":{
            "background-color":"red",
            "border-color":"#BBBBBB",
            "bar-width":"30px",
            "bar-space":"20px"
        },
        "no-data":{
            "text":"No analytics data available",
            "bold":true,
            "font-size":18
        }
    }


zingchart.render({ 
	id: 'myChart', 
	data: myConfig, 
	height: 400, 
	width: 450 
});

＆＃13;

html, body {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
}
#myChart {
	height:100%;
	width:100%;
	min-height:150px;
}
.zc-ref {
	display:none;
}

＆＃13;

<!DOCTYPE html>
<html>
	<head>
	<!--Assets will be injected here on compile. Use the assets button above-->
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
	</head>
	<body>
		<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
	</body>
</html>

＆＃13;

如何在Zingchart条形图中的下一行显示大X轴标签？

1 个答案:

适当的方法

Other solution