Zingchart 条形图从 y 轴 -50 开始

Question

当我尝试为移动设备创建条形图时，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

我已经更新了你的标签以适应你的环境，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({ 
 id: 'myChart', 
 data: myConfig, 
 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>

Answer 2

这可能是因为，要么您有 font-size 让图表扩展屏幕尺寸，要么尝试更改边距，这可能会有帮助，我过去曾尝试过，但没有成功。

Zingchart 条形图从 y 轴 -50 开始

Zingchart bar chart starting at y axis -50

coldfusion

cfchart

zingchart