Question

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

以下是我的代码，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>

Answer 1

尝试使用：

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

代替：

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

如何将数据传递到HighCharts中的下一页？

1 个答案: