javascript - Highcharts - 散点图 : How to send information from clicks to a function with information about the click as parameters-6ren

javascript - Highcharts - 散点图 : How to send information from clicks to a function with information about the click as parameters

转载作者：行者123 更新时间：2023-12-02 18:51:51

我有一个 highcharts 散点图，我想添加一些自定义功能。对于每次单击 highcharts 中的项目(单击过滤器、数据点和关闭按钮)，我想将有关单击的项目的信息发送到我在下面包含的函数“s”。任何人都可以帮助我使用正确的代码来执行此操作吗？或者是否可能？

这是我的函数 S，我已经编写了它，以便它接受变量 str0 到 str6 并将其作为 URL 变量发送到 s.php 以进行进一步处理。

    <script type="text/javascript">
function s(str0,str,str2,str3,str4,str5,str6)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    }
  }
xmlhttp.open("GET","/s.php?o="+str0+"&q="+str+"&r="+str2+"&s="+str3+"&t="+str4+"&u="+str5+"&v="str6,true);
xmlhttp.send();
}
</script>

例如，当有人单击一个数据点时，我想启动该函数，并包含 x 坐标、y 坐标、系列名称、股票代码、“info”，也许还包括字符串“datapoint”参数。

对于过滤器，我想包含过滤器的名称和一个表示“filter”的字符串。

对于关闭按钮，参数与单击数据点相同，但字符串会显示“close”而不是“datapoint”。

这是完整的代码。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>
<!-- Additional files for the Highslide popup effect -->
<script type="text/javascript" src="http://www.highcharts.com/highslide/highslide-full.min.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="style.css" />


        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">
$(function () {
        $('#container').highcharts({
            chart: {
                type: 'scatter',
                zoomType: 'xy'
            },
            title: {
                text: 'Q1 Eanings and Outlook Forecast'
            },
            subtitle: {
                text: 'site.com proprietary professional'
            },
            xAxis: {
                title: {
                    enabled: false,
                    text: 'Future Outlook'
                },
                labels:{formatter: function() {}  },
                startOnTick: true,
                endOnTick: true,
                showLastLabel: true
            },
            yAxis: {
                title: {
                    enabled:false,
                    text: 'Current Quarter'
                },
                    labels: {
        formatter: function() {
            //return this.value + ' ';
        }
    },

            },
            legend: {
                layout: 'vertical',
                align: 'left',
                verticalAlign: 'top',
                x: 100,
                y: 70,
                floating: true,
                backgroundColor: '#FFFFFF',
                borderWidth: 1
            },
            plotOptions: {
                scatter: {
                    marker: {
                        radius: 5,
                        states: {
                            hover: {
                                enabled: true,
                                lineColor: 'rgb(100,100,100)'
                            }
                        }
                    },
                    states: {
                        hover: {
                            marker: {
                                enabled: true
                            }
                        }
                    },
                    tooltip: {
                        headerFormat: '<b>{series.name}:</b><br>',
                        pointFormat: '{point.hover}<br><br><b>Current Q: </b>{point.y}/100<br><b>Outlook: </b>{point.x}/100<br><br><div style="text-align:center;">(click for more detail)</div>'
                    },



    cursor: 'pointer',
            point: {
                events: {
                        click: function() {
                            hs.htmlExpand(null, {
                                pageOrigin: {
                                    x: this.pageX,
                                    y: this.pageY
                                },
                                headingText: this.ticker,
                                maincontentText: '<b>Detail:</b> ' + this.info,
                                width: 200
                            });
                        }
                }
            }



                }
            },



                    series: [{
                    name: 'Weak Guidance',color: 'red',data: [
            {x: 40,y:10,ticker:'KORS',info: 's', hover:'<br>br><a href="">read more</a>'},
            {x: 20,y:50,ticker:'LULU',info:'D.<br><a href="">read more</a>'},
            {x:0,y:0,ticker:'ZNGA'},
            {x:4,y:10,ticker:'JCP'},
            {x:6,y:25,ticker:'DECK'}
            ]},

            {name:'Strong Guidance',color:'green',data:[
        {x:60,y:60,ticker:'lulu'},
        {x:100,y:100,ticker:'GPS'},
        {x:70,y:66,ticker:'FB'}
        ]},

        {name:'Inline Company Performance',color:'darkgrey',data:[
        {x:50,y:50,ticker:'GIII'},
        {x:53,y:43,ticker:'BNNY'}

        ]}]





        });
    });


        </script>
            <script type="text/javascript">
function s(str0,str,str2,str3,str4,str5,str6)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    }
  }
xmlhttp.open("GET","/s.php?o="+str0+"&q="+str+"&r="+str2+"&s="+str3+"&t="+str4+"&u="+str5+"&v="str6,true);
xmlhttp.send();
}
</script>
    </head>
    <body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="width: 900px; height: 400px; margin: 0 auto; float:left;"></div>




    </body>
</html>

我尝试做的一件事是......

                    events: {
            click: function(x,y,str2,str3,str4,str5,str6) {
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    }
  }
xmlhttp.open("GET","/s.php?o="+x+"&q="+y+"&r="+str2+"&s="+str3+"&t="+str4+"&u="+str5+"&v="+str6,true);
xmlhttp.send();
            }
        }

但我不知道如何获取与 str0、str...str6 等对应的我需要的信息

最佳答案

首先，我永远不会创建像 S 这样的函数。如果您发现自己使用诸如 arg1、arg2、arg3、arg4 之类的参数创建函数，那么您的设计就有问题。暂时忽略它并回答你的问题。

<小时/>

Highcharts 允许您为绘图上的许多不同组件设置click 事件处理程序。您可以在该特定组件的plotOptions 中设置这些处理程序。例如，如果您想处理 scatter plot point 上的点击事件，您可以像这样设置处理程序:

   plotOptions: {
        series: {
            point: {
                events: {
                    click: function() {
                        // look at the variable this
                    }
                }
            }
        }
    },

在function()内，this变量是被点击的项目。对于散点图点，它是点对象。在此函数中，您可以自由调用 s 函数，将您想要的任何数据传递给从 this 查询的数据。

接下来，如果您要创建关闭按钮作为 highcharts 上下文按钮，您将在该 component 上设置一个单击处理程序。。对于该处理程序，this 是图表对象。

使用这种方法，您可以为您关心的每个组件创建一个点击处理程序。从这些处理程序中，您可以调用 s 函数。

关于javascript - Highcharts - 散点图 : How to send information from clicks to a function with information about the click as parameters，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15746181/

文章推荐： javascript - Mocha : undefined is not a function

文章推荐：调用服务器端方法的 Javascript 函数不起作用

文章推荐： javascript - 使用 Google Maps API 显示 JSON 文件中的多边形

文章推荐： javascript - 使用 $.Deferred() 作为回调

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Highcharts - 散点图 : How to send information from clicks to a function with information about the click as parameters