根据json

Question

我使用Highcharts从json提供的数据渲染条形图，效果很好。我尝试的是，对于图表上显示的每个条，单击它必须导航到另一个页面，导航页面上显示的数据应该基于条形图上单击栏的ID。我不知道如何去做这个，但这是我到目前为止所做的。

var values: Array<any> = [];
  var labels: Array<any> = [];
  var ids: Array<any> = [];
  this.service.getData(url).subscribe(
      data => {
          this.results = data;
          this.results.map(function(result){
              values.push(result.percentage);
              labels.push(result.displayName);
              ids.push(result.id);
          })
          this.chart = {
              title: {
                  text: '',
                  style: {
                      display: 'none'
                  }
              },
              credits: {
                  enabled: false
              },
              chart: {
                  type: 'bar',
                  marginLeft: 120
              },
              xAxis: {
                  categories: labels,
              },
              yAxis: {
                  min: 0,
                  max: 100,
                  title: {
                      text: '',
                      style: {
                          display: 'none'
                      }
                  },
                  labels: {
                      overflow: 'justify'
                  }
              },
              tooltip: {
                  valueSuffix: ' %'
              },
              plotOptions: {
                  bar: {
                      dataLabels: {
                          enabled: false
                      }
                  },
                  series: {
                      pointWidth: 15,
                      cursor: 'pointer',
                      point: {
                          events: {
                              click: function(){
                              }
                          }
                      }
                  }
              },
              series: [{
                  showInLegend: false,
                  data: values,
                  name: 'demo'
              }]
          };

      }
  );

Answer 1

将高级图表PlotOption点击事件添加到您的条形图中，其类似于

plotOptions: {
       ... 
       ...
            events: {
                click: function (event) {
                    //event handling code
                }
            }
        }
    },

想法是，点击栏后，窗口必须导航到您的第二页，该页面使用GET或POST

接收信息

有关详情

，请参阅此Highcharts PlotOptions API和Highcharts JSFiddle Demo

Answer 2

有一个专门为此目的指定的模块，它被称为drilldown。

API参考：
http://api.highcharts.com/highcharts/drilldown

例：
http://jsfiddle.net/u4q55245/