尽管在水平条形图上显示的系列值框中存在相同的数据和选项，但ZingChart系列值框仍未显示

Question

有人可以向我解释为什么第一个系列价值框没有出现，但其余部分是什么？我现在已经把头撞在墙上一小时了。我在下面伪造了数据，但结果是一样的。提前谢谢！

＆＃13;

＆＃13;

var ctFin = 60;
var myConfig = {
  "type": "hbar",
  "font-family": "proxima_nova_rgregular",
  "title": {
    "text": "MINUTES <b>IN ZONES</b>",
    "font-family": "proxima_nova_rgregular",
    "background-color": "none",
    "font-color": "#39393d",
    "font-size": "22px",
    "adjustLayout": true,
    "height": "35px",
    "padding-bottom": "23px"
  },
  "plot": {
    "bars-overlap": "1%",
    "borderRadius": "0 3px 3px 0",
    "hover-state": {
      "visible": false
    },
    "animation": {
      "delay": 300,
      "effect": 4,
      "speed": "500",
      "method": "0",
      "sequence": "3"
    }
  },
  "plotarea": {
    "height": "99px",
    "border-left": "3px solid #39393d",
    "padding-left": "3px",
    "margin": "0 0 0 3px"
  },
  "scale-x": {
    "line-color": "none",
    "tick": {
      "visible": false
    },
    "guide": {
      "visible": false
    },
    "item": {
      "visible": false
    }
  },
  "scale-y": {
    "visible": false,
    "guide": {
      "visible": false
    }
  },
  "series": [
    {
      "values": [5],
      "bar-width": "20px",
      "background-color": "#cdcccc",
      "tooltip": {
        "visible": false
      },
      "value-box": {
        "placement": "top-out",
        "text": "%v",
        "decimals": 0,
        "font-color": "#35353b",
        "font-size": "14px",
        "alpha": 1,
        "rules": [
          {
            "rule": "%v / " + ctFin + " * 100 > 35",
            "placement": "top-in",
          },
          {
            "rule": "%v / " + ctFin + " * 100 < 25",
            "placement": "top-in",
          }
        ]
      }
    },
    {
      "values": [5],
      "bar-width": "20px",
      "background-color": "#71cbdc",
      "tooltip": {
        "visible": false
      },
      "value-box": {
        "placement": "top-out",
        "text": "%v",
        "decimals": 0,
        "font-color": "#35353b",
        "font-size": "14px",
        "alpha": 1,
        "rules": [
          {
            "rule": "%v / " + ctFin + " * 100 > 35",
            "placement": "top-in",
          },
          {
            "rule": "%v / " + ctFin + " * 100 < 25",
            "placement": "top-in",
          }
        ]
      }
    },
    {
      "values": [5],
      "bar-width": "20px",
      "background-color": "#8cc541",
      "tooltip": {
        "visible": false
      },
      "value-box": {
        "placement": "top-out",
        "text": "%v",
        "decimals": 0,
        "font-color": "#35353b",
        "font-size": "14px",
        "alpha": 1,
        "rules": [
          {
            "rule": "%v / " + ctFin + " * 100 > 35",
            "placement": "top-in",
          },
          {
            "rule": "%v / " + ctFin + " * 100 < 25",
            "placement": "top-in",
          }
        ]
      }
    },
    {
      "values": [5],
      "bar-width": "20px",
      "background-color": "#d96c27",
      "tooltip": {
        "visible": false
      },
      "value-box": {
        "placement": "top-out",
        "text": "%v",
        "decimals": 0,
        "font-color": "#35353b",
        "font-size": "14px",
        "alpha": 1,
        "rules": [
          {
            "rule": "%v / " + ctFin + " * 100 > 35",
            "placement": "top-in",
          },
          {
            "rule": "%v / " + ctFin + " * 100 < 25",
            "placement": "top-in",
          }
        ]
      }
    },
    {
      "values": [5],
      "bar-width": "20px",
      "background-color": "#ea2629",
      "tooltip": {
        "visible": false
      },
      "value-box": {
        "placement": "top-out",
        "text": "%v",
        "decimals": 0,
        "font-color": "#35353b",
        "font-size": "14px",
        "alpha": 1,
        "rules": [
          {
            "rule": "%v / " + ctFin + " * 100 > 35",
            "placement": "top-in",
          },
          {
            "rule": "%v / " + ctFin + " * 100 < 25",
            "placement": "top-in",
          }
        ]
      }
    }
  ]
};
zingchart.render({
  id: 'myChart',
  data: myConfig,
  height: 140,
  width: 330
});

＆＃13;

<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<div id="myChart"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

正如@axlj所说，调整你的plotarea将解决这个问题。您定义的绘图区域小于所有条形图的总高度。您定义了barWidth:'20px'，因此总高度为100px（5bars * 20）。如果您定义plotarea:'100px'，它将正常工作。最后，您不需要指定plotarea高度。我冒昧地合并了一些你的JSON属性。

＆＃13;

＆＃13;

var ctFin = 60;
var myConfig = {
  "type": "hbar",
  "font-family": "proxima_nova_rgregular",
  "title": {
    "text": "MINUTES <b>IN ZONES</b>",
    "font-family": "proxima_nova_rgregular",
    "background-color": "none",
    "font-color": "#39393d",
    "font-size": "22px",
    "adjustLayout": true,
    "height": "35px",
    "padding-bottom": "23px"
  },
  "plot": {
    "bar-width":20,
    "bars-overlap": "1%",
    "borderRadius": "0 3px 3px 0",
    "hover-state": {
      "visible": false
    },
    "animation": {
      "delay": 300,
      "effect": 4,
      "speed": "500",
      "method": "0",
      "sequence": "3"
    },
    "value-box": {
        "placement": "top-in",
        "text": "%v",
        "decimals": 0,
        "font-color": "#35353b",
        "font-size": "14px",
        "alpha": 1,
        "rules": [
          {
            "rule": "%v / " + ctFin + " * 100 > 35",
            "placement": "top-in",
          },
          {
            "rule": "%v / " + ctFin + " * 100 < 25",
            "placement": "top-in",
          }
        ]
      }
  },
  "tooltip": {
    "visible": false
  },
  "plotarea": {
    "border-left": "3px solid #39393d",
    "padding-left": "3px",
    "margin": "0 0 0 3px"
  },
  "scale-x": {
    "visible": false
  },
  "scale-y": {
    "visible": false,
    "guide": {
      "visible": false
    }
  },
  "series": [
    {
      "values": [5],
      "background-color": "#cdcccc",
    },
    {
      "values": [5],
      "background-color": "#71cbdc",
    },
    {
      "values": [5],
      "background-color": "#8cc541",
    },
    {
      "values": [5],
      "background-color": "#d96c27",
    },
    {
      "values": [5],
      "background-color": "#ea2629",
    }
  ]
};
zingchart.render({
  id: 'myChart',
  data: myConfig,
  height: 140,
  width: 330
});

＆＃13;

<!DOCTYPE html>
<html>
	<head>
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
	</head>
	<body>
		<div id="myChart"></div>
	</body>
</html>

＆＃13;

＆＃13;

＆＃13;