ZingCharts水平堆积条形图X轴标签被切断
[英]ZingCharts horizontal stacked bar chart X-Axis labels being cut off
问题描述
我创建了一个简单的水平条形图。 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>
2 个解决方案
解决方案1
4 已采纳 2015-03-17 11:41:29
所以我终于明白了。 如果使用'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>
解决方案2
2 2015-03-17 15:25:23
设置边距肯定有效。 您还可以在“plotarea”对象中使用“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>
ChartJS - 水平堆积条形图工具提示被画布底部切断
[英]ChartJS - Horizontal Stacked Bar Chart Tooltip being cut off by Bottom of Canvas
ChartJs - 带组的堆叠条形图 - 如何使用堆栈 ID 创建第二个 x 轴
[英]ChartJs - stacked bar chart with groups - how to create second x-axis with stack id
用于水平条形图的 Chart.js 中 x 轴上的自定义标签/固定范围？
[英]Custom labeling/fixed range on x-axis in Chart.js for horizontal bar chart?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.