logo标签列表

ZingCharts的水平堆叠条形图X轴标签被截断了。

javascriptzingchart
4

我创建了一个简单的水平条形图。如下示例中所示，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个回答
4

我终于弄清楚了。如果您使用“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
设置边距是有效的。您还可以在“plotarea”对象中使用“margin”：“dynamic”。文档中有一个演示，展示了通过这个属性实现一些长标签的方法。如果您对此有任何其他问题，请随时联系ZingChart团队。http://www.zingchart.com/docs/json-attributes-syntax/graph-objects/plotarea/ 

<!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>

谢谢 - 这很有用 :) 我发现它似乎没有考虑到我示例中“标题”所需的空间。 - John Whish
在这种情况下，你可以给标题对象添加adjust-layout属性来解决这个问题。由于无法在评论中包含代码片段，因此我将在上面的答案中添加它。 - Merrily
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接