0

2 つのシリーズの円グラフの凡例をカスタマイズしているときに、完全に立ち往生していることに気付きました。

JSFiddle とコード:

http://jsfiddle.net/jschlick/cCXkj/

colors: ['#f00000', '#f8d10a', '#9edb70'],
legend: {
  layout: 'horizontal',
  verticalAlign: 'bottom'
},
plotOptions: {
  pie: {
    point: {
      events: {
        legendItemClick: function () {
          this.select();
          elm.tooltip.refresh(this);
          return false;
        },
        mouseOver: function () {
          this.select();
          elm.tooltip.refresh(this);
          return false;
        }
      }
    },
    showInLegend: true
  },
  series: {
    dataLabels: {
      enabled: true,
      format: '{point.percentage}%'
    }
  }
},
series: [{
  type: 'pie',
  center: [450, 150],
  data: [
    ["Red", 2],
    ["Yellow", 5],
    ["Green", 3]
  ],
  size: '60%',
  innerSize: '40%'
}, {
  type: 'pie',
  linkedTo: ':previous',
  center: [150, 150],
  data: [
    ["Red", 1],
    ["Yellow", 2],
    ["Green", 7]
  ],
  size: '60%',
  innerSize: '40%'
}]

1) クリックの代わりにホバー時に実行するには、現在の凡例のクリック動作 (データ ポイントのスライス) が必要です。

2) "linkedTo: ':previous'" を使用すると、2 番目のグラフも凡例の動作に関連付けられると予想していましたが、影響を受けるのは最初のグラフだけです。IE 「赤」をクリックすると、両方のグラフで赤のデータ ポイントがスライスされます。

ご協力ありがとうございます。

4

1 に答える 1

0

これは回りくどい方法のように思えますが、最初に頭に浮かんだのはこれでした。HighCharts が凡例アイテムにホバー イベントを提供するとは思わないので、自分で作成しました。

[after creating the chart]

$.each(Highcharts.charts[0].legend.allItems, function() {
    var groupElem = this.legendGroup.element;  // for each legend group
    $.data(groupElem, 'info', {'series':[this.series, this.series.linkedSeries[0]],'point':this.x}); // store some data about the group for use in the mouseover call back
    $(groupElem).mouseover(function(){
            $.data(this,'info').series[0].points[$.data(this,'info').point].select(true,false); // select the pie wedge
            $.data(this,'info').series[1].points[$.data(this,'info').point].select(true,true); // select the linked pie wedge pass (true, true) to no deselect other.
        }); 
});

ここでフィドル。

于 2013-05-11T21:36:54.510 に答える