Question

我目前有一个像乔和约翰这样的传奇人物。我也需要有关于男性和女性的传说。如何添加男性和女性的传说。请帮我。

这是到目前为止我尝试过的代码的JSFiddle。

如果有帮助，还可以在下面创建一个可运行的代码段。

Highcharts.chart('container', {

  chart: {
    type: 'column'
  },

  title: {
    text: 'Total fruit consumtion, grouped by gender'
  },

  xAxis: {
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
  },

  yAxis: {
    allowDecimals: false,
    min: 0,
    title: {
      text: 'Number of fruits'
    }
  },

  tooltip: {
    formatter: function() {
      return '<b>' + this.x + '</b><br/>' +
        this.series.name + ': ' + this.y + '<br/>' +
        'Total: ' + this.point.stackTotal;
    }
  },

  plotOptions: {
    column: {
      stacking: 'normal'
    }
  },

  series: [{
    name: 'John',
    data: [5, 3, 4, 7, 2],
    stack: 'male',
    color: "#1f77ac",
    id: 'John'
  }, {
    name: 'Joe',
    data: [3, 4, 4, 2, 5],
    stack: 'male',
    color: "#098ebb",
    id: 'Joe'
  }, {
    name: 'John',
    data: [2, 5, 6, 2, 1],
    stack: 'female',
    linkedTo: 'John',
    color: "#1f77ac"
  }, {
    name: 'Joe',
    data: [3, 2, 4, 4, 3],
    stack: 'female',
    linkedTo: 'Joe',
    color: "#098ebb",
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Answer 1

您可以添加名称为male和female的空系列。要处理点击事件，请使用legendItemClick函数：

series: [..., {
    name: 'male',
    events: {
        legendItemClick: function() {
            // hide some series
        }
    }
}, {
    name: 'female',
    events: {
        legendItemClick: function() {
            // hide some series
        }
    }
}]

实时演示：https://jsfiddle.net/BlackLabel/6x52kzqd/

API参考：https://api.highcharts.com/highcharts/series.line.events.legendItemClick

高图：分组和堆叠图例

1 个答案: