文章/答案/技术大牛

发布

社区首页 >问答首页 >Zingchart如何添加自定义图例项

问Zingchart如何添加自定义图例项
EN

Stack Overflow用户

提问于 2017-03-09 20:53:13

回答 1查看 482关注 0票数 1

我有一个条形图，上面有三种条形图: FOO，bar和BAZ。

水平轴是1/4。

BAR和BAZ使用同一系列。1-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>

zingchart

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-03-14 02:25:47

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

demo here

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

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

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

非交互式图例demo here

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42695925

复制

相似问题

问Zingchart如何添加自定义图例项
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Zingchart如何添加自定义图例项EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Zingchart如何添加自定义图例项
EN