在我的网页中，我在不同的容器中显示zing图表。我动态设置容器的高度和宽度。相对于页面的宽度，容器的宽度可以是48％或96％，而高度来自后端（由用户定制）。
在容器内部，我显示了标题和面包屑，它占用了容器的一些高度（大约50px）。我需要使用该区域的其余部分绘制zing图表。
所以我尝试了两种方法：
在渲染zing图表时将高度和宽度设置为100％。在这种情况下，我需要为容器或zing图表设置滚动，以使我的图表正确。滚动不应该存在。所以我不得不放弃它。
我尝试的另一种方法是用50px减去容器的高度（如上面第2段第2行所述，它是标题和面包屑占用的空间）并在渲染时为图表设置高度。在某些情况下，这似乎是失败的，因为图表看起来太小了。我正在共享代码片段和失败的场景。
这是我用来设置垂直条形图的配置。
var vBarConfig = {
"type": "vbar"
, "legend": {
toggleAction: 'none'
, "marker": {
"cursor": "hand"
}
, "item": {
"cursor": "hand"
}
, "border-color": "none"
, "align": "center"
, "vertical-align": "bottom"
, "max-items": 4
, "overflow": "page"
, "page-on": {
"background-color": "black"
, "border-width": 1
, "border-color": "black"
}
, "page-off": {
"background-color": "#ffe6e6"
, "border-width": 1
, "border-color": "black"
}
, "page-status": {
"font-color": "black"
, "font-size": 11
, "font-family": "Georgia"
, "background-color": "#ffe6e6"
, }
}
, "plotarea": {
"margin-bottom": "35%"
, "margin-top": "15%"
, "border-top": "1px solid grey"
, "border-right": "1px solid grey"
}
, "scale-x": {
"labels": categoryVbarName
, "auto-fit": true
, "line-width": 1
, "items-overlap": true
, "item": {
"angle": 0
, "wrap-text": true
}
}
, "scale-y": {
"values": scaleValue
, "ref-value": refMarkerPosition
, "ref-line": {
"visible": true
, "line-color": refMarkerColor
, "line-width": refMarkerWidth
, "line-style": "solid"
, "items-overlap": true
}
, "guide": {
"line-style": "solid"
}
}
, "plot": {
"tooltip": {
"rules": $scope.tooltipVbarRules
}
, "value-box": {
"text": "%vt "
, "visible": true
, "font-color": "black"
, "font-size": "10px"
, "decimals": 2
, "angle": -90
, "placement": "middle"
}
, "animation": {
"effect": "ANIMATION_SLIDE_BOTTOM"
, "speed": "2000"
}
}
, "series": vbarData
}
/* Getting the height of the container */
var height=$('#'+contentName+'TH').height();
height=height-50;
zingchart.render({
id: contentName
, data: vBarConfig
, height:height
, width: '100%'
, defaults: commonSettings
});
还有其他方法可以让我的容器场景中的zing图表动态化吗？或者我做错了什么？ 示例场景： 我在调用渲染函数之前设置容器的高度。正如我所说，我已经使用了100％宽度和100％高度。 将生成图表的容器具有48％的宽度和高度“300px”。图表和面包屑的标题占据容器高度的“50px”。现在我们留下'250px'的高度来绘制我们的图表。 当我们为图表设置高度的渲染值为“100％”时，它需要'300px'的'100％'。这不应该发生，因为它将为容器创建滚动。我希望图表在250px空间内构建。 （无滚动）
答案 0 :(得分：1)
要使ZingChart响应，您必须在渲染方法中将height和width设置为100%。这不是你所要做的。您必须更新CSS容器才能使用min-height或固定height来查看图表呈现。由于SVG被注入到DOM中，如果你的容器没有内容（在图表之前），它将在这种情况下以0px的高度呈现。
以下是响应方式的常规图表配置：
var vBarConfig = {
"type":"vbar",
"legend":{
"marker":{
"cursor":"hand"
},
"item":{
"cursor":"hand"
},
"border-color":"none",
"align":"center",
"vertical-align":"bottom",
"max-items":4,
"overflow":"page",
"page-on":{
"background-color":"black",
"border-width":1,
"border-color":"black"
},
"page-off":{
"background-color":"#ffe6e6",
"border-width":1,
"border-color":"black"
},
"page-status":{
"font-color":"black",
"font-size":11,
"font-family":"Georgia",
"background-color":"#ffe6e6"
},
"toggle-action":"none"
},
"plotarea":{
"margin": "dynamic",
"border-top":"1px solid grey",
"border-right":"1px solid grey"
},
"scale-x":{
"auto-fit":true,
"line-width":1,
"items-overlap":true,
"item":{
"angle":0,
"wrap-text":true
}
},
"scale-y":{
"ref-line":{
"visible":true,
"line-style":"solid",
"items-overlap":true
},
"guide":{
"line-style":"solid"
}
},
"plot":{
"value-box":{
"text":"%vt ",
"visible":true,
"font-color":"black",
"font-size":"10px",
"decimals":2,
"angle":-90,
"placement":"middle"
},
"animation":{
"effect":"ANIMATION_SLIDE_BOTTOM",
"speed":"2000"
}
},
"series":[
{
"values":[5,15,10,6,4]
}
]
};
zingchart.render({
id: 'myChart',
data: vBarConfig,
height: '100%',
width: '100%'
});html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
.zc-ref {
display:none;
}<!DOCTYPE html>
<html>
<head>
<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>