具有多个系列的高图表上的点击事件

Question

当我的图表上有多个有交点的系列时，单击事件似乎根本不会触发。这是一个例子：

\n\n

http://jsfiddle.net/agnHV/22/

\n\n

如果您查看四月所有 3 个系列相交的位置，并尝试单击该点，它不会发出警报，但如果您检查任何不相交的点，它们会正确发出警报。

\n\n

\r\n

\r\n

$(function () {\r\n        $(\'#container\').highcharts({\r\n            chart: {\r\n                zoomType: \'xy\'\r\n            },\r\n            title: {\r\n                text: \'Average Monthly Weather Data for Tokyo\'\r\n            },\r\n            subtitle: {\r\n                text: \'Source: WorldClimate.com\'\r\n            },\r\n            xAxis: [{\r\n                categories: [\'Jan\', \'Feb\', \'Mar\', \'Apr\', \'May\', \'Jun\',\r\n                    \'Jul\', \'Aug\', \'Sep\', \'Oct\', \'Nov\', \'Dec\']\r\n            }],\r\n            yAxis: [{ // Primary yAxis\r\n                labels: {\r\n                    formatter: function() {\r\n                        return this.value +\'\xc2\xb0C\';\r\n                    },\r\n                    style: {\r\n                        color: \'#89A54E\'\r\n                    }\r\n                },\r\n                title: {\r\n                    text: \'Temperature\',\r\n                    style: {\r\n                        color: \'#89A54E\'\r\n                    }\r\n                },\r\n                opposite: true\r\n    \r\n            }, { // Secondary yAxis\r\n                gridLineWidth: 0,\r\n                title: {\r\n                    text: \'Rainfall\',\r\n                    style: {\r\n                        color: \'#4572A7\'\r\n                    }\r\n                },\r\n                labels: {\r\n                    formatter: function() {\r\n                        return this.value +\' mm\';\r\n                    },\r\n                    style: {\r\n                        color: \'#4572A7\'\r\n                    }\r\n                }\r\n    \r\n            }, { // Tertiary yAxis\r\n                gridLineWidth: 0,\r\n                title: {\r\n                    text: \'Sea-Level Pressure\',\r\n                    style: {\r\n                        color: \'#AA4643\'\r\n                    }\r\n                },\r\n                labels: {\r\n                    formatter: function() {\r\n                        return this.value +\' mb\';\r\n                    },\r\n                    style: {\r\n                        color: \'#AA4643\'\r\n                    }\r\n                },\r\n                opposite: true\r\n            }],\r\n            tooltip: {\r\n                shared: true\r\n            },\r\n            legend: {\r\n                layout: \'vertical\',\r\n                align: \'left\',\r\n                x: 120,\r\n                verticalAlign: \'top\',\r\n                y: 80,\r\n                floating: true,\r\n                backgroundColor: \'#FFFFFF\'\r\n            },\r\n            plotOptions:{\r\n                column:{\r\n                    point:{\r\n                        events:{\r\n                            click:function(){\r\n                            alert(\'aaa\');\r\n                            }\r\n                        }\r\n                    }\r\n                }\r\n            },\r\n            series: [{\r\n                name: \'Rainfall\',\r\n                color: \'#4572A7\',\r\n                type: \'column\',\r\n                yAxis: 1,\r\n                data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\r\n                tooltip: {\r\n                    valueSuffix: \' mm\'\r\n                }\r\n    \r\n            }, {\r\n                name: \'Sea-Level Pressure\',\r\n                type: \'spline\',\r\n                color: \'#AA4643\',\r\n                yAxis: 2,\r\n                data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],\r\n                marker: {\r\n                    enabled: false\r\n                },\r\n                dashStyle: \'shortdot\',\r\n                tooltip: {\r\n                    valueSuffix: \' mb\'\r\n                }\r\n    \r\n            }, {\r\n                name: \'Temperature\',\r\n                color: \'#89A54E\',\r\n                type: \'spline\',\r\n                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\r\n                tooltip: {\r\n                    valueSuffix: \' \xc2\xb0C\'\r\n                },\r\n                index: 1,\r\n                zIndex: 99,\r\n                events: {\r\n                \tclick: function(e) {\r\n                  \talert(\'boom\');\r\n                  \tconsole.log("CLICKY");\r\n                  }\r\n                }\r\n            }]\r\n        });\r\n    });\r\n    

\r\n

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>\r\n<script src="http://code.highcharts.com/highcharts.js"></script>\r\n<script src="http://code.highcharts.com/modules/exporting.js"></script>\r\n\r\n<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

\r\n

\r\n

\r\n

\n\n

我尝试添加索引/zIndex 来优先考虑某些点，但它似乎没有帮助。

\n

Answer 1

为您想出了一个很好的解决方案。由于各个线事件不可靠，因此我为图表上被单击的任何点创建了一个事件，然后使用事件信息来提取系列的名称并运行检查以查看它是否是我想要的。

\n\n

这是我添加的 Javascript： http: //jsfiddle.net/agnHV/24/

\n\n

plotOptions: {\n    series: {\n      point: {\n        events: {\n        click: function(e){\n          var seriesName = e.point.series.name;\n          if(seriesName == "Temperature") {\n            console.log("Clicked Temperature Line");\n          }\n          else if(seriesName == "Sea-Level Pressure") {\n            console.log("Clicked Sea-Level Line");\n          }\n          else if(seriesName == "Rainfall") {\n            console.log("Clicked Rainfall Bar");\n          }\n        }\n      }\n    }\n  }\n}\n

\n\n

\r\n

\r\n

plotOptions: {\n    series: {\n      point: {\n        events: {\n        click: function(e){\n          var seriesName = e.point.series.name;\n          if(seriesName == "Temperature") {\n            console.log("Clicked Temperature Line");\n          }\n          else if(seriesName == "Sea-Level Pressure") {\n            console.log("Clicked Sea-Level Line");\n          }\n          else if(seriesName == "Rainfall") {\n            console.log("Clicked Rainfall Bar");\n          }\n        }\n      }\n    }\n  }\n}\n

\r\n

$(function () {\r\n        $(\'#container\').highcharts({\r\n            chart: {\r\n                zoomType: \'xy\'\r\n            },\r\n            title: {\r\n                text: \'Average Monthly Weather Data for Tokyo\'\r\n            },\r\n            subtitle: {\r\n                text: \'Source: WorldClimate.com\'\r\n            },\r\n            xAxis: [{\r\n                categories: [\'Jan\', \'Feb\', \'Mar\', \'Apr\', \'May\', \'Jun\',\r\n                    \'Jul\', \'Aug\', \'Sep\', \'Oct\', \'Nov\', \'Dec\']\r\n            }],\r\n            yAxis: [{ // Primary yAxis\r\n                labels: {\r\n                    formatter: function() {\r\n                        return this.value +\'\xc2\xb0C\';\r\n                    },\r\n                    style: {\r\n                        color: \'#89A54E\'\r\n                    }\r\n                },\r\n                title: {\r\n                    text: \'Temperature\',\r\n                    style: {\r\n                        color: \'#89A54E\'\r\n                    }\r\n                },\r\n                opposite: true\r\n    \r\n            }, { // Secondary yAxis\r\n                gridLineWidth: 0,\r\n                title: {\r\n                    text: \'Rainfall\',\r\n                    style: {\r\n                        color: \'#4572A7\'\r\n                    }\r\n                },\r\n                labels: {\r\n                    formatter: function() {\r\n                        return this.value +\' mm\';\r\n                    },\r\n                    style: {\r\n                        color: \'#4572A7\'\r\n                    }\r\n                }\r\n    \r\n            }, { // Tertiary yAxis\r\n                gridLineWidth: 0,\r\n                title: {\r\n                    text: \'Sea-Level Pressure\',\r\n                    style: {\r\n                        color: \'#AA4643\'\r\n                    }\r\n                },\r\n                labels: {\r\n                    formatter: function() {\r\n                        return this.value +\' mb\';\r\n                    },\r\n                    style: {\r\n                        color: \'#AA4643\'\r\n                    }\r\n                },\r\n                opposite: true\r\n            }],\r\n            tooltip: {\r\n                shared: true\r\n            },\r\n            legend: {\r\n                layout: \'vertical\',\r\n                align: \'left\',\r\n                x: 120,\r\n                verticalAlign: \'top\',\r\n                y: 80,\r\n                floating: true,\r\n                backgroundColor: \'#FFFFFF\'\r\n            },\r\n            series: [{\r\n                name: \'Rainfall\',\r\n                color: \'#4572A7\',\r\n                type: \'column\',\r\n                yAxis: 1,\r\n                data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\r\n                tooltip: {\r\n                    valueSuffix: \' mm\'\r\n                }    \r\n            }, {\r\n                name: \'Sea-Level Pressure\',\r\n                type: \'spline\',\r\n                color: \'#AA4643\',\r\n                yAxis: 2,\r\n                data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],\r\n                marker: {\r\n                    enabled: false\r\n                },\r\n                dashStyle: \'shortdot\',\r\n                tooltip: {\r\n                    valueSuffix: \' mb\'\r\n                }                    \r\n            }, {\r\n                name: \'Temperature\',\r\n                color: \'#89A54E\',\r\n                type: \'spline\',\r\n                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\r\n                tooltip: {\r\n                    valueSuffix: \' \xc2\xb0C\'\r\n                }\r\n                /*events: {\r\n                \tclick: function(e) {\r\n                  \talert(\'boom\');\r\n                  \tconsole.log("CLICKY");\r\n                  }\r\n                }*/\r\n            }],\r\n            plotOptions: {\r\n            \tseries: {\r\n              \t  point: {\r\n                \tevents: {\r\n                  \tclick: function(e){\r\n                      var seriesName = e.point.series.name;\r\n                      if(seriesName == "Temperature") {\r\n                      \tconsole.log("Clicked Temperature Line");\r\n                      }\r\n                      else if(seriesName == "Sea-Level Pressure") {\r\n                      \tconsole.log("Clicked Sea-Level Line");\r\n                      }\r\n                      else if(seriesName == "Rainfall") {\r\n                      \tconsole.log("Clicked Rainfall Bar");\r\n                      }\r\n                    }\r\n                  }\r\n                }\r\n              }\r\n            }          \r\n        });\r\n    });

\r\n

\r\n

\r\n

\n