Zingchart 如何添加自定义图例项

Question

我有一个条形图，其中包含 3 种条形：FOO、BAR 和 BAZ。

横轴是四分之一。

BAR和BAZ使用同一系列。 BAR（蓝色）在 Q1-17 后变为 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

因此，一种方法是拆分您的数据。解释这一点的最简单方法是为 "BAZ" 制作另一个系列，并且在前两个季度中具有空值。

demo here

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

如果您不介意同时关闭蓝色和橙色条，您可以执行以下操作来添加另一个图例项。在 series 对象中添加文本和颜色。本质上，创建一个空白 series 对象。

      ...{
        "text":"BAZ",
        "background-color":"orange"
      }...

非交互式图例demo here

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

Zingchart 如何添加自定义图例项

Zingchart how to add custom legend item

zingchart