2016-11-13 35 views
0

我在我的网页中使用了高图的堆积条形图代码。我正在尝试为超链接添加到堆叠酒吧的每个部分。我有一些处于“完成”状态或“查询”或“未决”状态的账户的后端数据。我准备了代码来显示5天账户状态的图表。现在我希望当我点击任何一天的堆叠栏的“已完成”部分时,它应该打开包含当天完成的帐户列表的页面。我附上了截图和代码以供参考。谢谢。如何将超链接添加到高图的堆积条形图的每个部分php

click here to see image of the graph for 5 days of week

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Stacked column chart with data from MySQL using Highcharts</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     var options = { 
      chart: { 
       renderTo: 'container', 
       type: 'column', 
       marginRight: 130, 
       marginBottom: 25 
      }, 
      title: { 
       text: 'Account Status', 
       x: -20 //center 
      }, 
      subtitle: { 
       text: '', 
       x: -20 
      }, 
      xAxis: { 
       categories: [] 
      }, 
      yAxis: { 
       title: { 
        text: 'No of Accounts' 
       }, 
       plotLines: [{ 
        value: 0, 
        width: 1, 
        color: '#808080' 
       }] 
      }, 
      tooltip: { 
       formatter: function() { 
         return '<b>'+ this.series.name +'</b><br/>'+ 
         this.x +': '+ this.y; 
       } 
      }, 
      legend: { 
       layout: 'vertical', 
       align: 'right', 
       verticalAlign: 'top', 
       x: -10, 
       y: 100, 
       borderWidth: 0 
      }, 
      plotOptions: { 
       column: { 
        stacking: 'normal', 
        dataLabels: { 
         enabled: true, 
         color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' 
        } 
       } 
      }, 

      series: [] 
     } 

     $.getJSON("data.php", function(json) { 
      options.xAxis.categories = json[0]['data']; 
      options.series[0] = json[1]; 
      options.series[1] = json[2]; 
      options.series[2] = json[3]; 
      chart = new Highcharts.Chart(options); 
     }); 
    }); 
    </script> 
    <script src="highcharts.js"></script> 
    <script src="http://code.highcharts.com/modules/exporting.js"></script> 
</head> 
<body> 
    <div id="container" style="min-width: 400px; height: 400px; margin: 0  auto"></div> 
</body> 
</html> 

回答

0

您可以将事件添加到您的吧,要做到这一点添加到您的plotOptions:

series: [], 
plotOptions: { 
    series: { 
     cursor: 'pointer', 
     point: { 
      events: { 
       click: function() { 
        document.location.href = 'page.php?cat=' + this.category; 
       } 
      } 
     } 
    } 
}, 
+0

当我将此代码添加到我的剧本,图表从消失页。请帮助我。我没有从互联网获得帮助。谢谢。 –

+0

请参阅我的更新回答 – Max

+0

我正在尝试但无法完成。正如我已经使用贾森,你可以请看看我的上面的代码,并给我的代码添加事件。谢谢。 –