从 y 轴 -50 开始的条形图

Question

当我尝试为移动设备创建条形图时，y 轴实际上从屏幕中间开始，因此我无法完全看到我的图表。要查看图表，我需要将设备缩小 20%，或者我需要将绘图区 y 值设置为 -50。有人可以让我知道我哪里出错了吗？

添加以下代码时可以看到图形：

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

附图可以在这里看到：第 1 个：不带缩放，第 2 个：缩小 20%，第 3 个：y 为 -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'请尝试使用边距。

演示链接

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

这可能是因为，要么你有使图表扩展屏幕尺寸的字体大小，要么尝试更改它可能会有所帮助的边距，我过去尝试过，但没有运气。