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

how to pass data to next page in HighCharts?

本文关键字：HighCharts 一页 数据      更新时间：2023-09-26

目前我正在ColdFusion中进行Highchart。当我点击x轴标签时，我想将Highchart中的数据传递到下一页。我做的图表是蜘蛛网。对于一个场景，我有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>

尝试使用：

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

而不是：

return '<a href="' + categoryLinks[this.value] + '">' + this.value + '</a>';`
相关文章：