Question

我有一个Highchart，我在导出选项中添加了一个自定义标签（'Show label'），还添加了一个click事件，现在我的要求是，单击该标签时我需要获取ID （在这里是该特定图表的“容器”）。我也尝试过使用jquery，但是它没有用。任何人都可以帮助我。这是代码。

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
</head>
<body> 
<div id="container"></div>

脚本

Highcharts.chart('container', {

    title: {
        text: 'Solar Employment Growth by Sector, 2010-2016'
    },

    subtitle: {
        text: 'Source: thesolarfoundation.com'
    },

    yAxis: {
        title: {
            text: 'Number of Employees'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 2010
        }
    },
exporting: {
        menuItemDefinitions: {
            // Custom definition
            label: {
                onclick: function () {
                func();

                    this.renderer.label(
                        'You just clicked a custom menu item',
                        100,
                        100
                    )

                },
                text: 'Show label'
            }
        },
        buttons: {
            contextButton: {
                menuItems: ['downloadPNG', 'downloadSVG', 'separator', 'label']
            }
        }
    },
    series: [{
        name: 'Other',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
    }],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }

});
function func(){
alert('Hello');
}

Answer 1

您可以使用Highchart提供的renderTo方法访问呈现的HTML元素的ID。您的导出部分应为：

exporting: {
    menuItemDefinitions: {
        // Custom definition
        label: {
            onclick: function () {
                chartId = this.renderTo.id
                alert(chartId)
                this.renderer.label(
                    'You just clicked a custom menu item',
                    100,
                    100
                )

            },
            text: 'Show label'
        }
    },
    buttons: {
        contextButton: {
            menuItems: ['downloadPNG', 'downloadSVG', 'separator', 'label']
        }
    }
}

文档

https://api.highcharts.com/highcharts/chart.renderTo

Answer 2

您可以将event和上下文this传递到标签click函数处理程序中。

        label: {
                onclick: function (event) {
                func(event,this);
                this.renderer.label(
                    'You just clicked a custom menu item',
                    100,
                    100
                )

            },
            text: 'Show label'
        }


function func(event,context){
   console.log("chart id => ",context.renderTo.getAttribute('id'));
}

更新代码

Highcharts.chart('container', {

    title: {
        text: 'Solar Employment Growth by Sector, 2010-2016'
    },

    subtitle: {
        text: 'Source: thesolarfoundation.com'
    },

    yAxis: {
        title: {
            text: 'Number of Employees'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 2010
        }
    },
exporting: {
        menuItemDefinitions: {
            // Custom definition
            label: {
                onclick: function (event) {
                func(event,this);

                    this.renderer.label(
                        'You just clicked a custom menu item',
                        100,
                        100
                    )

                },
                text: 'Show label'
            }
        },
        buttons: {
            contextButton: {
                menuItems: ['downloadPNG', 'downloadSVG', 'separator', 'label']
            }
        }
    },
    series: [{
        name: 'Other',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
    }],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }

});
function func(event,context){
  console.log("chart id => ",context.renderTo.getAttribute('id'));
}

正在工作的jsFiddle演示-https://jsfiddle.net/sc0Lg4uh/1/

在console.log中检查容器的ID。

Highcharts-如何在导出选项中单击自定义标签时获取特定的图表ID

HTML

脚本

2 个答案:

文档