2016-03-28 75 views
1

目前我在ColdFusion中做Highchart。我想在Highchart中将我的数据传递到下一页,当我点击x轴的标签时。我做的图表是spiderweb。对于一个场景,我有像'总体','应用预订','接待','服务顾问','完成交付过程'等x轴标签。当我点击总体时,整体轴上的数据传递到我要去的链接的下一页。所以任何人都可以指导我如何去做?我设法链接到我想要的页面,现在我不知道如何让数据传递到下一页。如何将数据传递到HighCharts中的下一页?

以下是我的代码TQ。

<cfscript> 
 
    categories= ['Overall','Appt Booking', 'Reception', 'Service Advisor', 'Completion Delivery Process'] ; 
 

 
series = [{ 
 
      'name': 'Last Month', 
 
      'data': [3.775,3.5, 3.9, 4, 3.7], 
 
      'pointPlacement': 'on' 
 
     }, { 
 
      'name': 'MTD', 
 
      'data': [ 3.775, 3.7, 3.5, 3.9, 4], 
 
      'pointPlacement': 'on' 
 
     }, { 
 
      'name': 'Target', 
 
      'data': [3.725, 3.8,3.5, 3.7, 3.9], 
 
      'pointPlacement': 'on', 
 
      'url': 'https://www.google.com/' 
 
     }]; 
 
</cfscript> 
 

 
<html> 
 

 
<head> 
 
<script src="jquery.min.js"></script> 
 
<script src="highcharts.js"></script> 
 
<script src="exporting.js"></script> 
 
<script src="highcharts-more.js"></script> 
 

 
    
 
<script> 
 
$(function() { 
 
    
 
    var categoryLinks = { 
 
     'Overall': 'http://127.0.0.1:8500/highCharts/Spiderweb.cfm?id=1234', 
 
     'Appt Booking': 'http://127.0.0.1:8500/highCharts/line.cfm', 
 
     'Service Advisor': 'http://127.0.0.1:8500/highCharts/combine.cfm' 
 
    }; 
 

 
    $('#container').highcharts({ 
 

 
     chart: { 
 
      polar: true, 
 
      type: 'line' 
 
     }, 
 

 
     title: { 
 
      text: 'Budget vs spending', 
 
      x: -1000 
 
     }, 
 

 
     pane: { 
 
      size: '70%' 
 
     }, 
 

 
     xAxis: { 
 
      categories: <cfoutput>#serializeJson(categories)#</cfoutput>, 
 
      tickmarkPlacement: 'on', 
 
      lineWidth: 0, 
 
      labels: { 
 
       formatter: function() { 
 
        return '<a href="' + categoryLinks[this.value] + '">' + 
 
         this.value + '</a>'; 
 
       } 
 
      } 
 

 
     }, 
 

 
     yAxis: [{ 
 
      gridLineInterpolation: 'polygon', 
 
      lineWidth: 0, 
 
      min: 3, 
 
      endOnTick: true, 
 
      showLastLabel: true, 
 
      tickPositions: [3,3.5, 4, 4.5, 5], 
 
     }], 
 

 
      plotOptions: { 
 
      series: { 
 
       cursor: 'pointer', 
 
       point: { 
 
        events: { 
 
         click: function() { 
 
          alert('Category: ' + this.category + ', value: ' + this.y); 
 
         } 
 
        } 
 
       } 
 
      } 
 
     }, 
 

 
     tooltip: { 
 
      shared: true, 
 
      pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.2f}</b><br/>' 
 
     }, 
 

 
     legend: { 
 
      align: 'right', 
 
      verticalAlign: 'top', 
 
      y: 70, 
 
      layout: 'vertical' 
 
     }, 
 

 
     series: <cfoutput>#serializeJson(series)#</cfoutput> 
 

 
    }); 
 
}); 
 
</script> 
 

 
</head> 
 

 
<body> 
 

 
    <div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div> 
 

 
</body> 
 
</html>

+0

有什么数据?您可以使用urlencoded json将链接或形式参数传回给我。通常情况下,虽然像高图这样的东西更像是一个响应式应用程序,而不是一页接一页 - 根据您的点击重新绘制一张新图表。 –

+0

你好,我想要传递的数据是图表的价值,例如当我点击'Overall'时,整体的数据将传递给链接 –

+0

你现在正在这样做,例如:'http: //127.0.0.1:8500/highCharts/Spiderweb.cfm?id = 1234' - 'id = 1234'应传递。 –

回答

0

尝试使用:的

labels: { 
    formatter: function() { 
     location.href = categoryLinks[this.value]; 
    } 
} 

代替:

return '<a href="' + categoryLinks[this.value] + '">' + this.value + '</a>';` 
+0

你好,试试这个之前有错误 –

相关问题