2017-01-06 12 views
1

HighChartsドリルダウンの間に隠れた値を渡したいと思います。ユーザーがアイテム(アイテム1)をクリックすると、アイテムは3つの選択肢を持ちます。これらの選択肢のいずれかをクリックすると、このIDを使用して別のPHPスクリプトを使用してアクションを実行するために、項目1から隠されたIDを渡したいと思います。これは可能ですか?ハイチャートのドリルダウン間に隠れた値を渡すことはできますか?

$(function() { 
    // Create the chart 
    Highcharts.chart('container', { 
     chart: { 
      type: 'bar' 
     }, 
     title: { 
      text: 'Overall Status' 
     }, 
     xAxis: { 
      type: 'category', 
      labels: { 
       style: { 
        fontSize: '15px' 
       } 
      } 
     }, 
     legend: { 
      enabled: false 
     }, 
     plotOptions: { 
      series: { 
       borderWidth: 0, 
       dataLabels: { 
        enabled: true, 
        style: { 
         fontSize: '20px' 
        } 
       }, 
       cursor: 'pointer', 
       point: { 
        events: { 
         click: function() { 
          if (this.options && this.options.url) { 
           location.href = this.options.url; 
          } 
         } 
        } 
       } 
      } 
     }, 
     series: [{ 
      name: 'Status', 
      colorByPoint: true, 
      data: [{ 
       name: 'Item 1', 
       y: 80, 
       drilldown: 'item1' 
      }, { 
       name: 'Item 2', 
       y: 33, 
       drilldown: 'item2' 
      }] 
     }], 
     drilldown: { 
      series: [{ 
       id: 'item1', 
       data: [{ 
        name: 'Condition 1', 
        url: 'http://myurl?id=item 1', 
        y: 7 
       }, { 
        name: 'Condition 2', 
        url: 'http://myurl?id=item 1', 
        y: 2, 
       }, { 
        name: 'Condition 3', 
        url: 'http://myurl?id=item 1', 
        y: 1, 
       }] 
      }, { 
       id: 'item2', 
       data: [{ 
        name: 'Condition 1', 
        url: 'http://myurl?id=item 2', 
        y: 3 
       }, { 
        name: 'Condition 2', 
        url: 'http://myurl?id=item 2', 
        y: 2, 
       }, { 
        name: 'Condition 3', 
        url: 'http://myurl?id=item 2', 
        y: 9, 
       }] 

      }] 
     } 
    }); 
}); 

あなたはdrilldown event上で動的にそれを行うことができ、ここでjsfiddle https://jsfiddle.net/mark2017/bd1v6tew/2/

答えて

1

を持っています。

ポイントの隠しプロパティを定義します。

series: [{ 
    name: 'Status', 
    colorByPoint: true, 
    data: [{ 
    name: 'Item 1', 
    y: 80, 
    drilldown: 'item1', 
    hiddenValue: 'hidden 1', 
    }, { 
    name: 'Item 2', 
    y: 33, 
    drilldown: 'item2', 
    hiddenValue: 'hidden 2' 
    }] 
}], 

保存親hiddentプロパティドリルダウンイベントの新シリーズへ:

chart: { 
    type: 'bar', 
    events: { 
    drilldown: function (e) { 
     e.seriesOptions.hiddenValue = e.point.options.hiddenValue; 
    } 
    } 
}, 

ポイントクリックイベントでそれを読む:

click: function() { 
    var seriesOptions = this.series && this.series.options; 
    var hiddenValue = seriesOptions && seriesOptions.hiddenValue; 

    console.log(hiddenValue); 

例:https://jsfiddle.net/enjk7w1r/

関連する問題