【问题标题】:Highcharts Pie charts get the selected pie idHighcharts饼图获取选中的饼图id
【发布时间】:2016-05-26 20:47:05
【问题描述】:

如何让 Highcharts 饼图获取选定的饼图 id?

我有一个数据数组

var data= { name: series[i], y: Data[i],id:categorydata[i] };

渲染图表

new Highcharts.Chart({ ....

  ....  
series: [{
                type: 'pie',
                name: 'Category',
                data: data
            }]
  });

如何获取所选饼图的 id。

我正在这样做

plotOptions: {
                series: {
                    animation: false,
                    events:{
                        click: function (event) {
                            var point = this;
                            //How do I Access the id??????? 
                            alert('value: ' + this.series);


                        }
                    }
                },

【问题讨论】:

    标签: highcharts


    【解决方案1】:

    您希望在点配置上进行事件处理,而不是系列。每个楔形都是一个系列中的一个点:

       var data = [{ name: 'One', y: 10, id: 0 },{ name: 'Two', y: 10, id: 1 }];
    
       // some other code here...
    
       series:[
          {
             "data": data,
              type: 'pie',
              animation: false,
              point:{
                  events:{
                      click: function (event) {
                          alert(this.x + " " + this.y);
                      }
                  }
              }          
          }
       ],
    

    小提琴here.

    完整运行代码:

    var chart;
    point = null;
    $(document).ready(function () {
    
        var data = [{ name: 'One', y: 10, id: 0 },{ name: 'Two', y: 10, id: 1 }];
        
        chart = new Highcharts.Chart(
        {
           series:[
              {
                 "data": data,
                  type: 'pie',
                  animation: false,
                  point:{
                      events:{
                          click: function (event) {
                              alert(this.id);
                          }
                      }
                  }          
              }
           ],
           "chart":{
              "renderTo":"container"
           },
        });
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <div id="container" style="width: 320px; height: 200px"></div>

    【讨论】:

    • 感谢您的解释!
    • 感谢您的提示! :)
    • @DharmeshHadiyal,我修好了小提琴。
    • 如何在 typescript 或 angular 4 中全局访问“this.id”
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多