ZingCharts水平堆叠条形图X轴标签被切断
ZingCharts horizontal stacked bar chart X-Axis labels being cut off
我创建了一个简单的水平条形图。X 轴上的标签被切断,如下面的代码片段所示。我需要显示"X 轴行 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":{
"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>
设置边距肯定有效。您还可以在"绘图区"对象中使用"margin":"dynamic"。文档中有一个演示,显示了此属性容纳的一些长标签。http://www.zingchart.com/docs/json-attributes-syntax/graph-objects/plotarea/
我是ZingChart团队的成员,所以如果你对此有任何其他问题,请随时联系。
<!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",
"adjust-layout":1
},
"plotarea": {
"margin":"dynamic"
},
"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>
相关文章:
- 在<页眉>标签
- Ckeditor-plugin:插入虚假元素add不情愿<p>标签前后
- iframe正在添加标签,需要删除它们
- 如何自动调整标签的高度以适应内容
- 谷歌材料图表:强制在水平轴上显示每个标签
- ZingCharts水平堆叠条形图X轴标签被切断
- Highcharts单行堆叠水平条:标签重叠---条形段太小而无法读取“dataLabels”---(更改“dataLa
- Highcharts 单个水平堆叠条形图,始终显示数据名称(标签)和 %-年龄,并在鼠标悬停时显示数据编号和系列名称
- D3.js如何在水平对数缩放轴上放置自定义标签
- 如何在 jquery Mobile 中水平对齐标签和文本字段
- 在高图表水平条形图中显示所有标签
- 等水平间距3个标签
- 如何在Google Visualization API中格式化折线图上的水平轴标签
- 水平对齐选择标签
- 如何将水平滚动条设置为单个选择标签(下拉)
- 如何创建一个水平堆叠条形图,条形图上的标签以及条形图上方的标签
- D3:饼式标签的“水平”尾线没有重叠
- jqPlot水平条形图点标签挑战
- ChartJS水平标签是1-2px剪裁
- jQuery动画垂直滚动到一个元素和水平滚动到不同的元素在同一时间从单个哈希标签/变量