Question

我正在寻找一种方法来显示悬停在甜甜圈上的爆炸性传奇。这是plunker中的代码。

我通过使用highcharts和javascript在plunker中完成了类似的示例。我面临的问题是让它在Angular2组件中工作。 Here就是它。

 @Component({

  selector: 'my-app',

  styles: [`
          chart {
            display: block;
          }
          button {
            display: block;
            width: 100%;
            height: 25px;
          }
          legend-label-md {
        font-family: ProximaNova-Reg-webfont;
        width: 200px;

         pull-left {
        float: left !important;
    }
    pull-right {
        float: right !important;
    }
      `],
  template: `
            <chart  [options]="options" >
            </chart>
        `
})


class AppComponent {
  constructor() {
    this.options = {
      title: { text: ' ' },
      colors: ['#599EB5', '#436899', '#8FB95B', '#5AB782', '#47C3B9', '#BE78CB', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1'],
      chart: {
        type: 'pie',
        animation: false
      },
      plotOptions: {
        pie: {
          innerSize: '40%',
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
            enabled: false
          },
          showInLegend: true,
          states: {
            hover: {
              halo: {
                size: 0
              }
            }
          }
        },
        series: {
          animation: false,
          point: {
            events: {
              mouseOver: function (events) {
                const p = events.points

                console.log(p);
              },
              mouseOut: function (events) {
                //alert("mouse out");
              },

              legendItemClick: function (e) {
                console.log(this);
                return false;
              }
            }
          }
        }
      },
      tooltip: {

        enabled: false
      },
      legend: {
        useHTML: true,
        enabled: true,
        align: 'right',
        verticalAlign: 'top',
        layout: 'vertical',
        x: 0,
        y: 30,
        symbolHeight: 12,
        itemMarginBottom: 1,
        symbolWidth: 25,
        symbolRadius: 1,
        labelFormatter: function () {
          return '<div style="width:180px"><span class="pull-left" style= "font-weight: 500; padding-bottom: 5px">' + this.name +
            '</span><span class="pull-right" style= "font-weight: 500" >' + this.value +
            '</span></div> ';
        },
        title: {
          text: ' Issues<br/><span style="font-size: 9px; color: #666; font-weight: normal">Total: 2000</span>'
          //Click event on 2000 
          // call donut service's get total info. Need not have to pass any variable. 

        },
      },
      series: [{
        data: [{ name: 'AA Test_long_name_for_testing_purpose', value: '5,044', y: 5044 },
        { name: 'BB Test', value: '5,044', y: 5044 },
        { name: 'CC Test', value: '5,355', y: 5355 },
        { name: 'DD Test', value: '5,672', y: 56721 },
        { name: 'EE Test', value: '9,874', y: 98743 }],
        allowPointSelect: true
      }]
    };
  }

  options: Object;
  chart: Object;
}

Answer 1

以下是您应该使用的图表选项。我添加了两个事件，一个是mouseOver和mouseOut里面的系列 - ＆gt;点 - ＆gt;相应的图例项获取类并且鼠标移出的事件我删除该类。

更新了plnkr here

    this.options = {
        title : { text : ' ' },
        colors: ['#599EB5', '#436899', '#8FB95B', '#5AB782', '#47C3B9', '#BE78CB', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1'],
         chart: {
            type: 'pie',
             animation: false
        },



        plotOptions: {
            pie: {

                innerSize: '40%',
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true,
                states: {
                  hover: {
                    halo: {
                      size: 0
                    }
                  }
                }
            },
               series: {
                animation: false,
                point: {
                    events: {

                        legendItemClick: function (e) {
                           console.log(this);
                            return false;
                        },
                        mouseOver: function (e) {
                          e.target.legendItem.element.classList.add('highlight');

                           console.log(this);
                            return false;
                        },

                        mouseOut: function (e){
                          e.target.legendItem.element.classList.remove('highlight');

                           console.log(this);
                            return false;
                        }
                    }
                }
            }
        },
        tooltip: {

            enabled: false
        },

        legend: {
            useHTML: true,
            enabled: true,
            align: 'right',
            verticalAlign: 'top',
            layout: 'vertical',
            x: 0,
          y:30,
            symbolHeight: 12,
            itemMarginBottom: 1,
            symbolWidth: 25,
            symbolRadius: 1,

            title: {
        text: ' Issues<br/><span style="font-size: 9px; color: #666; font-weight: normal">Total: 2000</span>' 
        //Click event on 2000 
        // call donut service's get total info. Need not have to pass any variable. 

    },


        },




          series: [{



            data: [{ name: 'AA Test_long_name_for_testing_purpose', value: '5,044', y: 5044 },
                    { name: 'BB Test', value: '5,044', y: 5044 },
                     { name: 'CC Test', value: '5,355', y: 5355 },
                    { name: 'DD Test', value: '5,672', y: 56721 },
                    { name: 'EE Test', value: '9,874', y: 98743 }],
            allowPointSelect: true
        }]
    };
}

如何使图例在悬停

1 个答案: