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

Question

谁能给我解释一下为什么第一个系列的值框没有出现而其余的都出现了？一个小时以来，我一直在用头撞墙。我在下面伪造了数据，但结果是一样的。提前致谢！

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
});

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

Answer 1

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

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
});

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

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

ZingChart Series value box not showing despite identical data and options to a series value box that does show on horizontal bar chart

charts

zingchart