Highcharts - Как получить идентификатор конкретного графика по клику пользовательской метки в опциях экспорта - PullRequest
Новая
       1

Highcharts - Как получить идентификатор конкретного графика по клику пользовательской метки в опциях экспорта

0 голосов
/ 13 ноября 2018

У меня есть Highchart, в котором я добавил пользовательскую метку («Показать метку») в опциях экспорта. Я также добавил событие щелчка по нему. Теперь мое требование - при щелчке по этой метке мне нужно получить идентификатор(здесь это «контейнер») этой конкретной диаграммы. Я пытался также с 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');
}

Ответы [ 2 ]

0 голосов
/ 13 ноября 2018

Вы можете получить доступ к идентификатору визуализированного элемента HTML, используя метод renderTo, предоставленный Highchart. Ваш раздел экспорта должен быть: 

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

0 голосов
/ 13 ноября 2018

Вы можете передать event и контекст this в обработчик функции щелчка метки. 

        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 для идентификатора контейнера.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...