javascript – ZingCharts水平堆积条形图X轴标签被切断
作者：互联网
我创建了一个简单的水平条形图. X轴上的标签正在被截断,如下面的代码段所示.我需要显示’X Axis Row A’的完整标签.我试过改变图表的宽度,但这没有用.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingChart</title>
</head>
<body>
<div id="chartDiv"></div>
<script src='http://cdn.zingchart.com/zingchart.min.js'></script>
<script>
var chartData={
"type":"hbar",
"stacked":true,
"stack-type":"normal", // Also accepts "100%"
"title":{
"text":"X-Axis Row Label Cut Off Example"
},
"scale-x":{
"values":["X Axis Row B","X Axis Row A"],
},
"scale-y":{
"format":"%v%",
},
"series":[{
"background-color":"rgb(248,51,45)",
"text":"Negative",
"values":[-11,-22]
},{
"background-color":"rgb(120,152,55)",
"text":"Positive",
"values":[35,45]
}]
};
window.onload=function(){
var x = zingchart.render({
id:'chartDiv',
height:200,
width:600,
data:chartData
});
}
</script>
</body>
</html>解决方法:
所以我终于明白了.如果使用’plotarea’键,则可以指定边距.例如：
"plotarea":{
"margin":"40px 20px 50px 100px"
}
更新后的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingChart</title>
</head>
<body>
<div id="chartDiv"></div>
<script src='http://cdn.zingchart.com/zingchart.min.js'></script>
<script>
var chartData={
"type":"hbar",
"stacked":true,
"stack-type":"normal", // Also accepts "100%"
"title":{
"text":"Add Margin Example"
},
"plotarea": {
"margin":"40px 20px 50px 100px"
},
"scale-x":{
"values":["X Axis Row B","X Axis Row A"],
},
"scale-y":{
"format":"%v%",
},
"series":[{
"background-color":"rgb(248,51,45)",
"text":"Negative",
"values":[-11,-22]
},{
"background-color":"rgb(120,152,55)",
"text":"Positive",
"values":[35,45]
}]
};
window.onload=function(){
var x = zingchart.render({
id:'chartDiv',
height:200,
width:600,
data:chartData
});
}
</script>
</body>
</html>标签：javascript,zingchart 来源： https://codeday.me/bug/20190528/1171165.html