Question

我有一个使用data.table（HTML表格）构建的饼图。 http://jsfiddle.net/m78Lwkqt/2/

我想使用表格的第3列来点击特定网址。

       series:[
        {             
          type: 'pie',
          animation: false,
          point:{
              events:{
                  click: 
                      function (event) 
                      {
                          // I want to get the 3rd column of the table's value
                          // that corresponds to this point.
                          alert(this.y);
                      }
                  }
              }          
       }
       ]

Answer 1

找到答案：http://jsfiddle.net/ryanreid22/m78Lwkqt/4/

诀窍是添加一个可以在point.click处理程序中使用的seriesMapping值（在本例中我称之为'accountCode'）。

data: {
            table: 'smry_t_pb_outlay_by_account',
            seriesMapping: [{
                 x: 0, // X values are pulled from column 0 by default
                 y: 1, // Y values are pulled from column 1 by default
                accountCode: 2 // used in the point.click below
            }]
        },

events: {
        click:
            function (event) {
                alert(this.accountCode);
            }
        }

Answer 2

您可以使用jQuery选择器从第三列获取所有td，并在需要时将此点击事件中的this.x与您从jQuery选择器获得的数组进行匹配。

例如，使用jQuery选择器获取第三列：

var thirdColumn = $("#smry_t_pb_outlay_by_account tr td:nth-child(3)");

然后在point.events.click中使用此数组来获取数据：

point: {
    events: {
        click: function (event) {
            alert(thirdColumn[this.x].innerHTML);
        }
    }
}

请参阅代码的this JSFiddle demonstration。

如何使用data.table或data.csv以及用于单击事件处理的额外数据

2 个答案: