Highcharts与常见图例点击组合图 [英] Highcharts Combo graphs with common legend click

问题描述

我有一个组合图，带有饼图和条形图，现在我的问题是，我想要饼图和条形图都由相同的图例控制，因为状态是相同的...源示例创建一个JS小提琴任何帮助将不胜感激。

I have a combo graphs, with Pie and Bar Graph, now my problem is that I want pie chart and bar graph both controlled from the same legend, as status are the same... source example created a JS fiddle any help would be much appreciated.

http://jsfiddle.net/TV8f4/

 $(document).ready(function () {
                var Loveralldata = [0,1,1,0,0,5];
              var LDNOKdata = [['1032',11],['1040',0]];
              var LDOKONOKdata = [['1032',1],['1040',0]];
              var LDOKOOKdata = [['1032',1],['1040',0]];
              var LTBDdata = [['1032',1],['1040',0]];
              var LNAdata = [['1032',1],['1040',0]];
              var LNUAdata = [['1032',4],['1040',8]];
              var LCatData = ['Delhi HO','Regional Offices'];
              $('#location').highcharts({
                  chart: {
                      //events: {
                      //    click: function (event) {
                      //        alert('hide');

                      //    }
                      //}
                  },
                  credits: {
                      enabled: false
                  },
                  title: {
                      text: 'Location chart'
                  },
                  xAxis: {
                      categories: LCatData

                  },
                  yAxis: {
                      maxPadding: 1.5 
                  },
                  plotOptions: {
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function() {
                        alert(this.options.name);
                    }
                }
            }
        }
    },
                  tooltip: {
                      formatter: function () {
                          var s;
                          if (this.point.name) { // the pie chart
                              s = '' +
                                  this.series.name + ': ' + this.y ;
                          } else {
                              s = '' +
                                  this.category + ' ' + this.x + ': ' + this.y;
                          }
                          return s;
                      }
                  },
                  colors: ['#367A01', '#00D700', '#FFD700', '#D9D9D9', '#F4FA58', '#757873'],
                  labels: {
                      items: [{
                          style: {
                              left: '40px',
                              top: '8px',
                              color: 'black'
                          }
                      }]
                  },
                  series: [{
                      type: 'column',
                      name: 'Adequate and Effective',
                      data: LDOKOOKdata
                  }
                , {
                    type: 'column',
                    name: 'New Remediation Plans',
                    data: LDOKONOKdata
                }, {
                    type: 'column',
                    name: 'New Controls',
                    data: LDNOKdata
                },
                 {
                     type: 'column',
                     name: 'Not Updated/Approved ',
                     data: LNUAdata

                 },
                 {
                     type: 'column',
                     name: 'NA',
                     data: LNAdata
                 }
                 , {
                     type: 'column',
                     name: 'To Be Deleted',
                     data: LTBDdata
                 }
                , {
                    type: 'pie',
                    name: 'Overall Status',
                    data: [['Adequate and Effective', Loveralldata[2]], ['New Remediation Plans', Loveralldata[1]], ['New Controls', Loveralldata[0]], ['Not Updated/Approved', Loveralldata[5]], ['NA', Loveralldata[3]], ['To Be Deleted', Loveralldata[4]]],
                    center: [100, 50],
                    size: 150,
                    showInLegend: false,
                    dataLabels: {
                        enabled: false
                    }
                }]
              });
          });

推荐答案

您可以使用 legendItemClick 事件，然后在饼图中隐藏具有系列索引的元素，如 http://jsfiddle.net/TV8f4/3/

You can use legendItemClick event and then hide element with series index in pie chart like here http://jsfiddle.net/TV8f4/3/

legendItemClick:function(){

                     var index = this.index,
                         chart = this.chart,
                         series = chart.series,
                         len = series.length,
                         pieSerie = series[len-1];

                     pieSerie.data[index].setVisible();

                 }

这篇关于Highcharts与常见图例点击组合图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！