向图例项添加规则

Question

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

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

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

不行。

Answer 1

基于

SVG 编辑的解决方法

这是一个笨拙的解决方案，它进入 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