Question

我有一个带有3种条形图的条形图：FOO，BAR和BAZ。

横轴是四分之一。

BAR和BAZ使用相同的系列。在Q1-17之后，BAR（蓝色）成为BAZ（橙色）。

"rules": [{
    "rule": "%kv > 1",
    "background-color":"orange"
}]

如何在图例中添加BAZ（橙色）？

zingchart.THEME = "classic";
var myConfig = {
  "graphset": [{
    "type": "bar",
    "background-color": "white",
    "plotarea": {
      "margin": "80 60 100 60",
      "y": "125px"
    },
    "legend": {
      "layout": "x3",
      "y": "13%",
      "x": "34.5%",
      "overflow": "page",
      "toggle-action": "remove",
    },
    "scale-x": {
      "labels": [
        "Q4-16",
        "Q1-17",
        "Q2-17",
        "Q3-17"
      ],
      "markers": [{
        "value-range": true,
        "range": [1.5],
        "line-color": "red",
        "line-width": 1,
        "line-style": "solid",
        "type": "line"
      }]
    },
    "series": [{
        "values": [
          37.47,
          57.59,
          45.65,
          37.43
        ],
        "background-color": "#8993c7",
        "text": "FOO"
      },
      {
        "values": [
          13.4,
          14.11,
          14.89,
          16.86
        ],
        "background-color": "blue",
        "text": "BAR",
        "rules": [{
          "rule": "%kv > 1",
          "background-color": "orange"
        }]
      }
    ]
  }]
};

zingchart.render({
  id: 'myChart',
  data: myConfig,
  height: 500,
  width: 725
});

.zc-ref {
  display: none;
}

<html>

<head>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <script>
    zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "ee6b7db5b51705a13dc2339db3edaf6d"];
  </script>
</head>

<body>
  <div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
</body>

</html>

Answer 1

所以一种方法就是分割你的数据。最简单的解释方法是为＆＃34; BAZ＆＃34;制作另一个系列。并且在前两个季度中具有空值。

demo here

这样做的主要原因是维护内置的图例切换功能。这样当你点击它时不会关闭整个系列（蓝色和橙色条。）我认为这是预期的功能。

如果您不介意同时关闭蓝色和橙色条，您可以执行以下操作添加另一个图例项。在def insert(self, node):对象中添加文本和颜色。基本上，创建一个空白的series对象。

series

非互动传奇demo here

如果您正在寻找这两个演示之间的内容，则需要使用ZingChart API进行一些自定义Javascript。

Zingchart如何添加自定义图例项

1 个答案: