Question

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

我喜欢给它们打造样式，让一些看起来更小，一些禁用，这样的东西。如果我要定义一个模块/插件，我将如何操作项目数组？

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

不起作用。

Answer 1

基于SVG编辑的解决方法

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

unless除非有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

向图例项添加规则

2 个答案:

基于SVG编辑的解决方法