如何使zingchart在沒有滾動的容器內完全響應？

Question

在我的網頁中，我在不同的容器中顯示了zing圖表。我動態設置容器的高度和寬度。容器的寬度將相對於頁面的寬度爲48％或96％，而高度來自後端（由用戶定製）。

在容器內，我顯示該接受容器（50像素左右）的高度的一定量的報頭和麪包屑。我需要使用該區域的其餘部分來繪製zing圖表。

所以，我試圖兩種方法：

設置的高度和寬度爲100％，而渲染誠圖表。在這種情況下，我需要爲容器或zing圖表設置滾動條，以便使我的圖表正確。不應該存在滾動條。所以我不得不放棄這個。

我試過的另一種方法是用50px減去容器的高度（如上面在第二段第二行中所述，這是頭和麪包屑所佔用的空間），並在渲染時爲圖表設置高度。在某些情況下，這似乎是失敗的，因爲圖表似乎太小了。我正在分享代碼段和它失敗的場景。

這是我使用的用於垂直杆誠圖表設置的配置。

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 
      }); 

有一些其他的方式，我可以讓誠圖表動態在我的容器的情況？或者我做錯了什麼？ 示例場景： 我設置的容器高度調用渲染函數之前。正如我所說已經使用100％寬度和100％高度。 圖表即將生成的容器具有48％的寬度和高度'300px'。圖表和麪包屑的標題佔用容器高度的'50px'。現在我們留下'250px'的高度來繪製我們的圖表。 當我們將圖表的高度渲染值設置爲「100％」時，它會佔用'300px'的'100％'。這不應該發生，因爲它會爲容器創建滾動。我想要在250px空間內構建圖表。 （無滾動）

Answer 1

要使ZingChart響應，您必須將render方法中的height和width設置爲100%。這不是你所要做的。你必須更新你的CSS容器有一個min-height或固定height見圖表呈現。由於SVG被注入到DOM中，如果你的容器沒有內容（在圖形之前），在這種情況下它將呈現在0px的高度。

這是你的普通圖表配置以快速響應的方式：

demo link here

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({ 
 
\t id: 'myChart', 
 
\t data: vBarConfig, 
 
\t height: '100%', 
 
\t width: '100%' 
 
});

html, body { 
 
\t height:100%; 
 
\t width:100%; 
 
\t margin:0; 
 
\t padding:0; 
 
} 
 
#myChart { 
 
\t height:100%; 
 
\t width:100%; 
 
\t min-height:150px; 
 
} 
 
.zc-ref { 
 
\t display:none; 
 
}

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <script src= "https://cdn.zingchart.com/zingchart.min.js"></script> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div> 
 
\t </body> 
 
</html>