0

我有一个 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 坐标、系列名称、股票代码、“信息”，也许还有字符串“数据点”作为参数。

对于过滤器，我想包含过滤器的名称，以及一个显示“过滤器”的字符串。

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

这是完整的代码。

<!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等的信息

4

1 回答 1

2

首先，我永远不会创建像S. 如果您发现自己使用类似的参数创建函数，arg1, arg2, arg3, arg4那么您的设计就有问题。忽略一秒钟并回答您的问题。

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

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

变量内部function()是this被点击的项目。在散点图的情况下，它是点对象。在这个函数中，你可以自由地调用你的s函数，传递你想要从this.

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

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

于 2013-04-01T18:51:15.180 回答