0

在此示例中单击数据点时，会出现弹出窗口，但它一直在角落，并且大小不正确。任何人都可以看到任何直接的问题吗？

实时代码在这里http://goo.gl/q8sfH

<!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="http://www.highcharts.com/highslide/highslide.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: 'Companies'
            },
            subtitle: {
                text: 'data.com proprietary professional'
            },
            xAxis: {
                title: {
                    enabled: true,
                    text: 'Future Outlook'
                },
                startOnTick: true,
                endOnTick: true,
                showLastLabel: true
            },
            yAxis: {
                title: {
                    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.x} cm, {point.y} kg'
                    },



                cursor: 'pointer',
                events: {
                            click: function() {
                                hs.htmlExpand(null, {
                                    pageOrigin: {
                                        x: this.pageX,
                                        y: this.pageY
                                    },
  //                                  headingText: this.series.name,
                                    maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+
                                        this.y +' visits',
                                    width: 200
                                });
                            }
                }



                }
            },



                    series: [{
                    name: 'Nasdaq',
                    color: 'red',
            data: [
            { y: 1,x:4,ticker:'KORS'}, {y: 5,x:2,ticker:'LULU'}, {x:0,y:0,ticker:'ZNGA'}, {x:.4,y:1,ticker:'JCP'}, {x:.6,y:2.5,ticker:'DECK'}

            ]},{name:'SP',color:'green',data:[
        {x:6,y:6,ticker:'lulu'},{x:10,y:10,ticker:'GPS'},{x:7,y:6.6,ticker:'FB'}
        ]},{name:'Inline Company Performance',color:'darkgrey',data:[

        {x:5,y:5,ticker:'GIII'},{x:5.3,y:4.3,ticker:'BNNY'}

        ]}]





        });
    });


        </script>
    </head>
    <body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
    </body>
</html>
4

2 回答 2

1

this.pageX 和 this.pageY 未定义，因为您现在拥有它们。

替换这个：

click: function() {
    hs.htmlExpand(null, {
        pageOrigin: {
            x: this.pageX,
            y: this.pageY
        },
        headingText: this.name,
        maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+
        this.y +' visits',
        width: 200
    });
}

有了这个：

click: function(e) {
    hs.htmlExpand(null, {
        pageOrigin: {
            x: e.pageX,
            y: e.pageY
        },
        headingText: this.name,
        maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+
        this.y +' visits',
        width: 200
    });
}

在 function() 中调用“e”，并为 pageX 和 pageY 引用它

编辑以澄清并回答您的次要问题：

如果将事件放在点对象中，则可以跳过上述更改，然后可以使用 this.x 和 this.y 从单击的点中提取其他数据元素：

            cursor: 'pointer',
            point: {
                events: {
                        click: function() {
                            hs.htmlExpand(null, {
                                pageOrigin: {
                                    x: this.pageX,
                                    y: this.pageY
                                },
                                headingText: this.series.name,
                                maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+
                                    this.y +' visits',
                                width: 200
                            });
                        }
                }
            }

尽管您尝试格式化为日期的 x 值不是日期，但您可能会从中得到 12/31/1969...

于 2013-03-28T19:44:41.770 回答
0

如果您需要X 轴this.category的值，请使用

于 2015-03-10T05:32:23.767 回答