向图例项添加规则

Question

有没有办法单独处理图例项？

我想设计它们的样式，让一些看起来更小，一些看起来不可用，诸如此类。如果我要定义一个 module/plugin，我将如何操作项目数组？

legend: {
  item: {
    rules: []
  }
}

无效。

Answer 1

基于 SVG 编辑的解决方法

这是一个 hacky 解决方案，它进入 SVG 标记并设置我们想要的属性：0.25 不透明度和更小的标记半径。

⚠ 除非有 SVG 渲染和圆形图例标记，否则它会崩溃。
它也无法处理 legend_item_click 事件（它工作得太早，之后被覆盖）。

let disableLegendItems = (arr) => {
  let markers = [...document.getElementById('chartDiv-graph-id0-legend-c').children],
  items = [...document.getElementsByClassName('zc-legend-item')];
  arr.map((i) => {
    markers[i].setAttribute('fill-opacity', '0.25');
    markers[i].setAttribute('r', '4');
    items[i].setAttribute('fill-opacity', '0.25');
  });
  console.warn(`Legend items at indexes ${arr} styled as disabled`);
};

zingchart.bind('demo-chart', 'load', function() {
  disableLegendItems([3, 7, 8, 9, 11, 13]);
});

Answer 2

您可以通过在系列对象（放置值的位置）中设置 legendMarker 和 legendItem 对象来自定义图例。这样您就可以为每个单独的系列自定义图例标记和项目。我们不必使用规则，为了效率，应该尽可能避免使用规则。

这里有一个演示，向您展示如何进行设置： https://demos.zingchart.com/view/064CFFCD

向图例项添加规则

Add rules to legend items

zingchart

基于 SVG 编辑的解决方法