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

标签 javascript jquery highcharts coldfusion

目前我在 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>';`

关于javascript - 如何将数据传递到 HighCharts 中的下一页?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36254983/

相关文章:

javascript - Chrome 扩展 : accessing the DOM of the popup. html 并让 jQuery 工作

javascript - $.each 只显示一个系列 Highcharts

javascript - 将数据传递给 Bootstrap 3 模态

javascript - 异步请求附加到 Angular 中的字符串

带有回调和参数的 Javascript 函数

php - 编码为 JavaScript 对象,函数被替换

javascript - 在半重叠的气泡中隐藏在气泡内容后面直到 Highcharts 中的隐藏部分

Javascript 继承实例属性?

JavaScript:从文件读取器中提取 base64 字符串

javascript - html5gallery 在 Firefox 中不工作