当我尝试为移动设备创建条形图时，y轴实际上从屏幕中间开始，因此我无法完全看到我的图表。要查看图表，我需要将设备缩小20％，或者我需要将绘图区域值设置为-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时，我无法单击这些条。
答案 0 :(得分：1)
我已将您的代码更新为适合您的环境，coldfusion。我假设你也在使用cfchart。这意味着并非所有属性都会持续存在。
我调整了一些属性。它们主要与margins对象中的plotarea有关。我最好的建议是，如果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>
答案 1 :(得分：0)
可能是因为，你要么拥有使图表扩展屏幕大小的字体大小，要么尝试更改它可能有用的边距，我过去尝试过但没有运气。