y 축에서 시작하는 Zingchart 막 대형 차트 -50

Question

모바일 용 barchart를 만들려고 할 때 실제로 y 축은 화면 가운데에서 시작하므로 차트가 완전히 보이지 않습니다. 차트를 보려면 장치를 20 % 축소해야하거나 plotarea y 값을 -50으로 설정해야합니다. 누군가 내가 잘못 가고 있는지 알려주실 수 있습니까? 아래의 코드를 추가 할 때

그래프를 볼 수 있습니다 :

plotarea:{ 
      adjustLayout: 1, 
      marginTop:'dynamic', 
      backgroundFit: "y", 
      "y": -50 
     } 

첨부 이미지는 여기에서 볼 수있다 : 1st: Without zoom, 2nd: With 20% zoom out, 3rd: with y as -50

전체 코드는 여기에 있습니다 :

는

var myConfig = { 
     type: "bar", 
     backgroundColor: "transparent", 
     plotarea:{ 
      adjustLayout: 1, 
      marginTop:'dynamic', 
      backgroundFit: "y" 
      //"y": -50 
     }, 
     plot:{ 
      "rules": [ 
       { 
        "rule": "%i==0", 
        "background-color": "#ACD373", 
        "placement": "in" 
       }, 
       { 
        "rule": "%i==1", 
        "background-color": "#B7B7B7", 
        "placement": "in" 
       }, 
       { 
        "rule": "%i==2", 
        "background-color": "#FF6E5B", 
        "placement": "in" 
       }, 
       { 
        "rule": "%i==3", 
        "background-color": "#6DCFF6", 
        "placement": "in" 
       }, 
       { 
        "rule": "%i==4", 
        "background-color": "#F9AD81", 
        "placement": "in" 
       }, 
       { 
        "rule": "%i==5", 
        "background-color": "#898989", 
        "placement": "in" 
       } 
      ], 
      valueBox:{ 
       fontColor: "#fff", 
       connector: { 
        lineWidth: 1 
       }, 
       "text": "%v", 
       "font-size": 20, 
       "font-weight": "normal", 
       "font-style": "normal" 
      } 
     }, 
     "scale-x": { 
      "label":{ 
       "text":[], 
       "color": "#fff" 
      }, 
      item:{ 
       color: "#fff", 
      }, 
      "guide":{ 
       "line-width":0 
      }, 
      zooming: true, 
      "values":[] 
     }, 
     "scale-y":{ 
      "line-color":"none", 
      "item":{ 
       "visible": false 
      }, 
      "tick":{ 
       "line-color":"none" 
      }, 
      "guide":{ 
       "line-color":"#4A6B89", 
       "line-width":1, 
       "line-style":"solid", 
       "alpha":1 
      } 
     }, 
     labels:[ 
      { 
       //text:"Hold SHIFT to detach<br>multiple slices", 
       textAlign: "left", 
       fontColor: "#fff" 
      } 
     ], 
     series: [{values:[]}] 
    }; 

동일한 코드가 완벽하게 작동 이 차트를 렌더링하는 div에 대해 동일한 데이터 세트와 동일한 너비 높이를 갖는 다른 차트의 경우. 또한, 나는 바의 아무 곳이나 클릭해도 다른 차트를 열지 않기 때문에 y 값을 -50으로 만들 수 없습니다. y를 -50으로 만들 때 막대를 클릭 할 수 없습니다.

Answer 1

때문에이 될 수도 중 하나는 차트 화면의 크기를 확장하거나 도움이 될 여백을 변경하려고합니다 글꼴 크기를 것, 나는 그것을 시도 과거에는 운이 없었습니다.

Answer 2

귀하의 환경에 적합하도록 coldfusion 태그를 업데이트했습니다. cfchart도 사용하고 있다고 가정합니다. 즉, 모든 속성이 계속 유지되는 것은 아닙니다.

몇 가지 속성을 조정했습니다. 대부분 plotarea 개체 내에서 margins과 관련이 있습니다. margin:'dynamic'이 빌드에 적용되지 않는 경우 내 최선의 제안은 여백을두고 놀아 보는 것입니다.

demo link

var myConfig = { 
 
     type: "bar", 
 
     backgroundColor: "#1D3557", 
 
     plotarea:{ 
 
      adjustLayout: 1, 
 
      margin:'dynamic', 
 
     }, 
 
     plot:{ 
 
      "rules": [ 
 
       { 
 
        "rule": "%i==0", 
 
        "background-color": "#ACD373", 
 
        "placement": "in" 
 
       }, 
 
       { 
 
        "rule": "%i==1", 
 
        "background-color": "#B7B7B7", 
 
        "placement": "in" 
 
       }, 
 
       { 
 
        "rule": "%i==2", 
 
        "background-color": "#FF6E5B", 
 
        "placement": "in" 
 
       }, 
 
       { 
 
        "rule": "%i==3", 
 
        "background-color": "#6DCFF6", 
 
        "placement": "in" 
 
       }, 
 
       { 
 
        "rule": "%i==4", 
 
        "background-color": "#F9AD81", 
 
        "placement": "in" 
 
       }, 
 
       { 
 
        "rule": "%i==5", 
 
        "background-color": "#898989", 
 
        "placement": "in" 
 
       } 
 
      ], 
 
      valueBox:{ 
 
       fontColor: "#fff", 
 
       connector: { 
 
        lineWidth: 1 
 
       }, 
 
       "text": "%v", 
 
       "font-size": 20, 
 
       "font-weight": "normal", 
 
       "font-style": "normal" 
 
      } 
 
     }, 
 
     "scale-x": { 
 
      "label":{ 
 
       "text":'Version', 
 
       "color": "#fff" 
 
      }, 
 
      item:{ 
 
       color: "#fff", 
 
      }, 
 
      "guide":{ 
 
       "line-width":0 
 
      }, 
 
      zooming: true, 
 
      "values":[] 
 
     }, 
 
     "scale-y":{ 
 
      "line-color":"none", 
 
      "item":{ 
 
       "visible": false 
 
      }, 
 
      "tick":{ 
 
       "line-color":"none" 
 
      }, 
 
      "guide":{ 
 
       "line-color":"#4A6B89", 
 
       "line-width":1, 
 
       "line-style":"solid", 
 
       "alpha":1 
 
      } 
 
     }, 
 
     zoom: { 
 
      preserveZoom:true, 
 
     }, 
 
     labels:[ 
 
      { 
 
       //text:"Hold SHIFT to detach<br>multiple slices", 
 
       textAlign: "left", 
 
       fontColor: "#fff" 
 
      } 
 
     ], 
 
     series: [{values:[15,25,35,45,35,45]}] 
 
    }; 
 

 
zingchart.render({ 
 
\t id: 'myChart', 
 
\t data: myConfig, 
 
\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>