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 に答える